Slashdot Mirror


Chrome 57 Arrives With CSS Grid Layout and API Improvements (venturebeat.com)

Google has launched Chrome 57 for Windows, Mac, and Linux. From a report on VentureBeat: Among the additions is CSS Grid Layout, API improvements, and other new features for developers. You can update to the latest version now using the browser's built-in silent updater, or download it directly from google.com/chrome. Chrome is arguably more than a browser: With over 1 billion users, it's a major platform that web developers have to consider. In fact, with Chrome's regular additions and changes, developers have to keep up to ensure they are taking advantage of everything available. Chrome 57 implements CSS Grid Layout, a two-dimensional grid-based layout system for responsive user interface design. Elements within the grid can be specified to span multiple columns or rows, plus they can also be named so that layout code is easier to understand. The goal is to give developers more granular control, especially as websites are increasingly accessed on various screen sizes, so they can slowly move away from complex code that is difficult to maintain.

51 of 87 comments (clear)

  1. also by DuroSoft · · Score: 1

    not to mention the tons of software, video game launchers, etc., using Electron (though these changes won't be available that far downstream for a while I would think)

  2. Sorry by Ol+Olsoc · · Score: 1, Funny

    But is it compatible with Internet Explorer 6? W have to use IE6.

    --
    The shepherds did so well protecting the flock that the sheep no longer believed that wolves existed.
    1. Re:Sorry by ranton · · Score: 1

      I think it's trying to be IE6 for the new century. Has everyone already forgotten what a terrible idea browser specific language extensions are?

      This is not a browser specific language extensions. CSS Grid Layout is currently a Candidate Recommendation by the CSS Working Group of the W3C. As long as browsers keep up with updates made to the proposal while it moves towards becoming a completed W3C Recommendation, I see no problem with implementing it now.

      In the W3C's own words: "at this step, W3C believes the technical report is stable and appropriate for implementation."

      --
      -- All that is necessary for the triumph of evil is that good men do nothing. -- Edmund Burke
  3. At last! by Anonymous Coward · · Score: 1

    CSS Grid Layout! I've been waiting for that to be adopted by browsers for what seems like forever. Props to Microsoft for that particular spec (I would also have been happy with the older Template Layout proposal, which is a weirder yet slightly more powerful way of doing the same thing). Hopefully Firefox will add support CSS grids soon too - from the progress on Bugzilla it looks like it might be right around the corner.

    1. Re:At last! by Chatterton · · Score: 1

      It's been a week that Firefox implemented it (ie: Firefox 52)

  4. So, tables? by jon3k · · Score: 4, Insightful

    Remember 15-20 years ago when we had based layouts? And then they invented CSS because that was such a terrible idea. Then we spend 10 years trying inventing css grid systems (ie bootstrap's grid, 960, etc) to replicate what we used to do with tables until they just finally gave up and made CSS Grid and Flexbox? That was sure fun.

    1. Re:So, tables? by nycsubway · · Score: 4, Insightful

      I've always used tables. I know exactly what I'm getting every time, and how to fix it if it doesn't look right. There's too much relativism is css... I find it easier to design a webpage with concrete layout.

      I'm sure css layout is useful, and developers are able to do amazing things with it. But for me, tables are simple and make sense.

    2. Re: So, tables? by Anonymous Coward · · Score: 1

      Yes. The problem is simple.

      HTML is about semantics. Table tags are not semantically correct for layout purposes. DIVs are however.

      Another major issue is that CSS is based on print media concepts, not application UIs.

    3. Re:So, tables? by StormReaver · · Score: 1

      Remember 15-20 years ago when we had <table> based layouts?

      I was going to say nearly the exact same thing. To be fair, CSS has a bit more capabilities than standard tables of the past. It is funny, though. Tables were considered obsolete until they suddenly weren't. So, tables 2.0 it is.

    4. Re:So, tables? by Piata · · Score: 1

      Flexbox works nothing like the table element. They're not even remotely similar.

      CSS Grid is similar to the table element, except it eliminates all the problems associated with and makes web design much more similar in approach to print design. As someone that has gone from table layouts to float layouts to flex layouts and recently started using css grid layouts, I can say emphatically that no one gave up and went backwards.

      It's incredibly exciting to see these tools in the wild. To have them derided and wrongfully labelled as rehashes of the woefully inadequete the table element is not only counter productive, it's also incredibly wrong.

    5. Re:So, tables? by Piata · · Score: 1

      A bit more? It's like comparing a rowboat to an ocean linear.

      How do those tables work in a responsive layout? How much mark up do you need to create a table layout vs the same thing with a CSS grid layout? Is the table layout completely independent from it's content?

      It's not that structuring things in a way that was similar to a table was a problem, it's that tables were woefully inadequate. That lead people to using floats, which were really meant for having text float around images. Now we have flexbox for general content and grids for overall page construction. With these tools, the web might be mature enough that we don't need a whole new system every 5 years.

    6. Re:So, tables? by Piata · · Score: 1

      Firefox released their implementation earlier this week: https://www.mozilla.org/en-US/...

    7. Re:So, tables? by DontBeAMoran · · Score: 2

      And people like you are the reason why websites look like crap on mobile.

      --
      #DeleteFacebook
    8. Re:So, tables? by dmgxmichael · · Score: 1

      Remember 15-20 years ago when we had <table> based layouts? And then they invented CSS because that was such a terrible idea. Then we spend 10 years trying inventing css grid systems (ie bootstrap's grid, 960, etc) to replicate what we used to do with tables until they just finally gave up and made CSS Grid and Flexbox? That was sure fun.

      No, not tables, not by a long shot. CSS grid, like CSS in general, decouples presentation rules from the data being presented. So you can take content and display it on a grid on desktop using cssgrid, or as a list on a phone. The order of the columns and rows can be swapped out according to the dimensions of the screen which is impossible with tables.

      I've been doing this since 1996, so I'm quite aware of what table based layout involves and its limitation. While there is some passing similarity, the two are very different in what they can be used for.

      The table tag itself needs to just become semantic but that's unlikely to happen since all the browsers have to support legacy behaviors associated with the tag.

    9. Re:So, tables? by roccomaglio · · Score: 1

      A return to table layouts was exactly what I was thinking. Funny that it is sold as a table layout better supports responsive design, since the reason tables layouts were phases out is that they were inflexible. Now table layouts are being sold as a fix to the difficulty of floating layouts. Everything that is old is new again.

    10. Re:So, tables? by tepples · · Score: 1

      I thought the size of a fingertip was why websites look like crap on mobile. Too much of the viewport has to be devoted to controls.

    11. Re:So, tables? by DontBeAMoran · · Score: 1

      If you think you can apply a 1:1 ratio from a smartphone display to a web pixel, you are mistaken.

      --
      #DeleteFacebook
    12. Re:So, tables? by jafiwam · · Score: 1

      A bit more? It's like comparing a rowboat to an ocean linear.

      How do those tables work in a responsive layout? How much mark up do you need to create a table layout vs the same thing with a CSS grid layout? Is the table layout completely independent from it's content?

      It's not that structuring things in a way that was similar to a table was a problem, it's that tables were woefully inadequate. That lead people to using floats, which were really meant for having text float around images. Now we have flexbox for general content and grids for overall page construction. With these tools, the web might be mature enough that we don't need a whole new system every 5 years.

      I used to be a table layout expert. Learned all the tricks. That was OK when we had 1024x768 monitors all over and nobody had a wide aspect ratio screen.

      Then switched to CSS, and I see the GP's point, the relativism makes some aspects a bit harder. CSS and DIVs are harder and about the same layout-wise.

      Then I went and tried to make a table layout site ADA compliant (just Section 508, not the newer standards) and realized the table layout methods need to die permanently.

    13. Re:So, tables? by dmgxmichael · · Score: 1

      What kind of data are you displaying where it doesn't matter if you show it as a 10x10 grid (aka, a table of 10 rows and 10 columns) or as a list (aka, a table of 1 column and an infinite number of rows, which in this case I guess would be 100.)?

      The context I meant for "data" above was all the data of the page. Navigation elements in headers, footers and asides. Currently these are positioned using floats and they have to be present in the HTML dom in a certain order for this to work. With grids (and to a lesser extent flexbox) the order the information appears in the DOM isn't relevant.

      The example you gave of a 10x10 table isn't the same - it's just a table, not a web document that may need to have its data's presentation optimized for several environments. And yeah, you can set elements to display none and/or double send elements and turn on the one you want for a given view context but that's a waste of bandwidth.

      I don't see grids replacing tables where tables make sense. Tables don't make sense as a layout grid mechanism. CSS Grids don't make sense as a table replacement either.

    14. Re:So, tables? by Piata · · Score: 1

      That's not how phone displays work. Pixel density matters so your 1024x768 phone could report it's screen-width as 320x240.

    15. Re:So, tables? by Piata · · Score: 1

      What kind of data are you displaying where it doesn't matter if you show it as a 10x10 grid (aka, a table of 10 rows and 10 columns) or as a list (aka, a table of 1 column and an infinite number of rows, which in this case I guess would be 100.)?

      Data != a website layout. CSS Grids are designed for displaying layouts, tables are designed for displaying data.

      Or where you can simply exclude or rearrange some rows/columns and not lose anything?

      Every time you build a responsive layout you do this.

      CSS Grid allows you to organize content and re-arrange the layout for the screen it's being displayed on. This allows a website to be optimal on all devices. That's the biggest advantage but it stretches a lot farther than that.

      You can't turn a 10x10 table into a 4x25 table. CSS Grid lets you do that and then some. That's why it's a big deal and that's why it's not just tables 2.0.

    16. Re:So, tables? by erapert · · Score: 1

      What is a web pixel???

    17. Re:So, tables? by DontBeAMoran · · Score: 1

      The device pixel ratio is the ratio between physical pixels and logical pixels. For instance, the iPhone 4 and iPhone 4S report a device pixel ratio of 2, because the physical linear resolution is double the logical linear resolution. The formula is , where and are the physical and logical linear resolutions.Jan 9, 2012

      --
      #DeleteFacebook
  5. Not Keeping Up. Horseshit. by caferace · · Score: 4, Insightful

    "In fact, with Chrome's regular additions and changes, developers have to keep up to ensure they are taking advantage of everything available. "

    Uh, no. You don't. The page you developed yesterday (or in 2000) should display just the same if you did it right in the first place. If not it's the browsers fault, not yours for "not keeping up". It's a fucking web browser.

    1. Re:Not Keeping Up. Horseshit. by Anonymous Coward · · Score: 1

      Agreed, developers shouldn't have to keep up with trends. Except for the huge fonts, excessive whitespace, and forced scrolling. Those are real innovations and shouldn't be taken lightly.

    2. Re:Not Keeping Up. Horseshit. by caferace · · Score: 1

      I'm taking that with large grains of salt, soon to be extricated as kidney stones.

    3. Re:Not Keeping Up. Horseshit. by dmgxmichael · · Score: 2

      "In fact, with Chrome's regular additions and changes, developers have to keep up to ensure they are taking advantage of everything available. "

      Uh, no. You don't. The page you developed yesterday (or in 2000) should display just the same if you did it right in the first place. If not it's the browsers fault, not yours for "not keeping up". It's a fucking web browser.

      Do you earn money for the page you developed in 2000? Cause trust me, if you are still using table based layouts you are going to have a hard time getting a job, or even avoiding being laughed at during interviews.

      Either keep up with the latest techniques, or lose jobs to people who do. This is true in all industries.

  6. Bad idea by fyngyrz · · Score: 5, Insightful

    With over 1 billion users, it's a major platform that web developers have to consider. In fact, with Chrome's regular additions and changes, developers have to keep up to ensure they are taking advantage of everything available.

    Web developers: You should be avoiding non-standard browser capabilities like the plague. Period.

    And in Google's case, where they have a solid record of abandoning projects many people depend upon at the drop of a virtual hat, you're taking a significant risk if you hitch your cart to their projects

    Chrome's non-standard bits can be reasonably described as the ActiveX of this particular time period.

    As Dr. Frank N. Furter has said: "Do you want them to see you... LIKE THIS???"

    If you really think these things are valuable and should be supported, the smart thing to do is to work to see them become standards, wait for the resulting standards to be supported by all the major players, and then use them.

    --
    I've fallen off your lawn, and I can't get up.
  7. One thing... by Oswald+McWeany · · Score: 1, Insightful

    One thing I liked more about Chrome than IE is that it was closer to being standard. It didn't change every version and was almost always backwards compatible with previous versions.

    This non-standard CSS Grid Layout, which, may be a great idea, is completely useless unless it is a standard used by all browsers.

    --
    "That's the way to do it" - Punch
    1. Re:One thing... by dmgxmichael · · Score: 4, Insightful

      One thing I liked more about Chrome than IE is that it was closer to being standard. It didn't change every version and was almost always backwards compatible with previous versions.

      This non-standard CSS Grid Layout, which, may be a great idea, is completely useless unless it is a standard used by all browsers.

      If I recall correctly CSS Grid was a Microsoft proposal. It is already in Edge, just disabled by default, and Safari is expected to support it with it's next release this fall. That leaves Firefox, but I'm pretty sure they aren't too far behind. This particular segment of CSS4 has been in the works for nearly 3 years.

    2. Re:One thing... by iampiti · · Score: 2

      CSS grid is already supported by Firefox in version 52 which was released a few days ago.

  8. It *WAS* a "major platform" by acroyear · · Score: 1

    But then they decided to get rid of their Apps framework and only support extensions (unless you're on Chromebook...and that may go away too if they ever get Android Apps on Chromebook working right).

    Now it is just a browser with some annoying security restrictions and a need for a ton of extensions. It isn't an app engine platform in the way it used to be, at least not until they figure out how to support PWAs on desktop.

    Firefox is supporting the common extensions framework (though not very well) and PWAs on Android (though not very well - they don't support standalone/fullscreen yet, which is ridiculous), so Chrome's losing some of what made it a platform to target.

    --
    "But remember, most lynch mobs aren't this nice." (H.Simpson)
    -- Joe
    1. Re:It *WAS* a "major platform" by acroyear · · Score: 1

      Mind you, I hated how their app framework required you to use alternatives to HTML5 standards. You had no browser history/routing (had to fake/polyfill that), and no standard localStorage (have to use proprietary callback based API), and even image loading from http CORS sources is f'ed.

      So yeah, Chrome App development was painfully annoying...but they could have resolved that without just dropping the whole engine.

      The parallels to Chrome's handling of this and the GOP's handling of the Obamacare replacement are rather impressive.

      --
      "But remember, most lynch mobs aren't this nice." (H.Simpson)
      -- Joe
  9. Re:Chrome _is_ the standard! by Anonymous Coward · · Score: 5, Insightful

    I think you missed the point of the GP. It doesn't matter that Chrome is the defacto standard, browser specific extensions are a terrible idea. Period. I'm going to guess you're fairly young and don't remember the fiasco that IE6 was. It was the defacto standard of the time with a market share that makes Chromes current market share seem insignificant. They added their specific extensions and it threw the entire web into chaos. It took some 15 years to recover from. The shockwaves are still being felt to this day some 20 years later.

    Learn from history, don't repeat it. Browser specific extensions seem like a good idea at the time, but help no one in the long run. It just causes compatibility nightmares for years.

  10. Re:Tables by __aaclcg7560 · · Score: 1

    Tables went out of style for content placement. If you have rows of data to present, a table layout works just as fine as it always have.

  11. About that shiny new feature... by __aaclcg7560 · · Score: 1

    What's the difference between CSS grid layout and BootStrap's grid layout?

    1. Re:About that shiny new feature... by ranton · · Score: 2

      What's the difference between CSS grid layout and BootStrap's grid layout?

      One is supported in all browsers and one is not.

      --
      -- All that is necessary for the triumph of evil is that good men do nothing. -- Edmund Burke
    2. Re:About that shiny new feature... by Piata · · Score: 2

      BootStrap's grid layout uses floats to achieve a grid. CSS grid is an actual CSS specification built around creating grids in the browser window. It's incredibly useful for web apps and also makes web design much more similar to print design.

      A good site for learning how to use CSS Grids: http://gridbyexample.com/

    3. Re:About that shiny new feature... by __aaclcg7560 · · Score: 1

      Thanks for the info. I'll probably wait until the feature is implemented in BootStrap.

  12. Very nice, but still no OpenType SVG support by grungeman · · Score: 1

    In case you didn't know, Chrome is the only main browser left that does not support colored fonts. Actually there are several proposed standards for colored fonts, and Chrome supports exactly none of them. The most promising standard is OpenType SVG. Edge fully supports this and Firefox supports it, too, although they forgot to implement the SVG compression.

    Here is more information on this feature: https://helpx.adobe.com/typeki...

    And here is an example (looks nicer on Firefox and Edge): https://people-mozilla.org/~jk...

    Let's hope we will see this in the not too distant future.

    --

    Signature deleted by lameness filter.
  13. Re:Pointless until Safari catches up by grungeman · · Score: 1

    Yes, Safari has been the new InternetExplorer for a while. The finally fixed the IndexedDB issues, but it's still behind in many other parts. I really wish the would catch up, because you cannot ignore that market share of Apple customers who are too lazy to install Chrome.

    --

    Signature deleted by lameness filter.
  14. Royalties continue by tepples · · Score: 1

    Do you earn money for the page you developed in 2000?

    That'd be like The Walt Disney Company earning money for short films it produced in 1928. Or like Gershwin Enterprises earning money for a musical piece written in 1924.

    Oh wait, those are still the case because of the three-generation copyright regime.

    1. Re:Royalties continue by tepples · · Score: 1

      How stupid are you?

      Smart enough to know that this question could be interpreted as a personal attack.

      the mediums could not be more different

      Let me rephrase my understanding of your comment without personal attacks: "The web doesn't have residuals the way old media do. Unlike people who compose music and people who make motion pictures, most people who make an HTML document do not earn royalties for its continued public display years later." Is this accurate? If not, what did I miss?

  15. Safari is practically the only iOS web browser by tepples · · Score: 1

    or web designers just tell Safari users to stop using that backward browser.

    And switch to what? Every third-party web browser in the iOS App Store other than Opera Mini uses the same WebKit engine that Safari uses, with the same unsupported elements, attributes, and APIs. Should iOS users switch to Opera Mini, which is essentially Remote Desktop to a browser running on someone else's server? Or should they instead choose to forfeit access to all iTunes Store and App Store purchases?

  16. Re:EME by tepples · · Score: 1

    You can turn off Flash, EME, and other proprietary technologies by building Chromium from source, as some GNU/Linux distributions do.

  17. Re:Chrome _is_ the standard! by smelch · · Score: 1

    It's actually kind of the reverse. It's cute that you still don't understand that IE6 wasn't a problem. It added a tremendous amount of functionality that wasn't available before. The problem was how long it took to go from IE6 to IE7, how long it took the W3C to provide standards that people wanted, and the fact that Firefox, Opera, IE6 and Safari all implemented standards differently for a long time. I concede that IE took the longest to get their shit in order, but I don't think we'd be better off had IE not pushed forward ahead of standards.

    Of course, things are a little different now because we aren't having a problem with the standards lagging so far behind desired capability. This whole thread is stupid because CSS Grids are standard.

    --
    If I can just reach out with my words and touch a butthole, just one, it will all be worth it.
  18. Re:Chrome _is_ the standard! by ilsaloving · · Score: 3, Informative

    Yeah, and 15 years ago Internet Explorer and ActiveX was the 'defacto standard'.

    We all know how well that turned out. Anyone who isn't very new to computing, should know very well that things *will* change, and they will change *drastically*. HTTP and HTML has survived(ish) the test of time *precisely* because they are formal standards that are independent of a specific product and company.

    Every single time people have tied themselves to a specific product du jour, they've been bitten very hard on the ass. Every. Single. Time.

    It doesn't matter what W3C "standards" have been written. They're useless to most web users and developers until they've actually been implemented in Chrome.

    This is the bit that compelled me to comment. The sorry state of web technology today is precisely because people like you think you're too good to follow something as archaic as "standards". You think you know better. The end result is *everything* is getting balkanized to hell, security is going down the toilet, and compatibility is turning into a bad joke.

    Here's a truth bomb for you: You *arn't* as good as you think you are, and you *don't* know better.

    Standards exist for a reason, and if you are unable to recognize that fact, then you have no business developing anything technology-related.

  19. Table layouts get really ugly by rsilvergun · · Score: 1

    really fast. They're a nightmare to edit, support and debug. Tables are great for, well, tables. Lists of information. A grid layout is something else entirely. It's a UI construct you use to layout application controls. Sure, you can use tables for that, but with tables if you make one change the whole thing falls apart. If you ever used Swing or VB's layout tools this looks to be a step in that direction, which would rock.

    --
    Hi! I make Firefox Plug-ins. Check 'em out @ https://addons.mozilla.org/en-US/firefox/addon/youtube-mp3-podcaster/
    1. Re:Table layouts get really ugly by jon3k · · Score: 1

      They're a nightmare to edit, support and debug.

      I wasn't really serious in my original post, but if your argument is CSS based layouts are easier to debug than a table, I'll have to disagree, strongly. CSS is far more powerful and complex, which makes it tremendously more difficult to "debug".

  20. If you link to dynamic libraries by rsilvergun · · Score: 1

    you can get a lot of functionality and improvements for 'free' as the libraries update. Stuff like bootstrap.js, jquery and angular. If that's too scary for you can you switch the libraries out on a test system and see how they perform first.

    For any complex web app you're building it with libraries. No sane person does that much work on their own, just like no sane person writes their own browser just run their own web apps on.

    --
    Hi! I make Firefox Plug-ins. Check 'em out @ https://addons.mozilla.org/en-US/firefox/addon/youtube-mp3-podcaster/
  21. Re:Chrome _is_ the standard! by Sperbels · · Score: 1

    This is a joke, right?