Follow Slashdot blog updates by subscribing to our blog RSS feed

 



Forgot your password?
typodupeerror
×
Chrome The Internet

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

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.
This discussion has been archived. No new comments can be posted.

Chrome 57 Arrives With CSS Grid Layout and API Improvements

Comments Filter:
  • 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)
    • Bad idea (Score:5, Insightful)

      by fyngyrz ( 762201 ) on Friday March 10, 2017 @10:17AM (#54012431) Homepage Journal

      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.

  • Sorry (Score:2, Funny)

    by Ol Olsoc ( 1175323 )
    But is it compatible with Internet Explorer 6? W have to use IE6.
  • by Anonymous Coward

    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.

  • So, tables? (Score:5, Insightful)

    by jon3k ( 691256 ) on Friday March 10, 2017 @10:02AM (#54012345)
    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.
    • Re:So, tables? (Score:5, Insightful)

      by nycsubway ( 79012 ) on Friday March 10, 2017 @10:53AM (#54012681) Homepage

      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.

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

        • by tepples ( 727027 )

          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.

    • by Anonymous Coward

      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.

    • 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.

      • by Piata ( 927858 )

        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 fo

        • by jafiwam ( 310805 )

          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.

    • by Piata ( 927858 )

      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 w

    • 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 tw

    • 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.
    • 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.
      • by jon3k ( 691256 )

        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".

  • by caferace ( 442 ) on Friday March 10, 2017 @10:02AM (#54012347) Homepage

    "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.

    • by Anonymous Coward

      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.

      • by caferace ( 442 )

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

    • "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.

      • 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.

    • 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.
  • One thing... (Score:2, 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.

    • Re:One thing... (Score:5, Insightful)

      by dmgxmichael ( 1219692 ) on Friday March 10, 2017 @12:00PM (#54013111) Homepage

      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.

  • 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

    • by acroyear ( 5882 )

      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

  • What's the difference between CSS grid layout and BootStrap's grid layout?
    • by ranton ( 36917 )

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

      One is supported in all browsers and one is not.

    • by Piata ( 927858 )

      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/ [gridbyexample.com]

  • 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... [adobe.com]

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

Don't tell me how hard you work. Tell me how much you get done. -- James J. Ling

Working...