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.
also (Score:1)
Bad idea (Score:5, Insightful)
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.
Re:Chrome _is_ the standard! (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.
Re: (Score:2)
Re: (Score:2)
Re:Chrome _is_ the standard! (Score:4, 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.
Sorry (Score:2, Funny)
Re: (Score:2)
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." [w3.org]
At last! (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.
Re: (Score:2)
It's been a week that Firefox implemented it (ie: Firefox 52)
So, tables? (Score:5, Insightful)
Re:So, tables? (Score:5, 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.
Re: (Score:3)
And people like you are the reason why websites look like crap on mobile.
Re: (Score:2)
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.
Re: (Score:2)
If you think you can apply a 1:1 ratio from a smartphone display to a web pixel, you are mistaken.
Re: (Score:2)
Re: (Score:2)
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
Re: (Score:2)
Re: So, tables? (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.
Re: (Score:2)
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.
Re: (Score:2)
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
Re: (Score:2)
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.
Re: (Score:2)
Re: (Score:2)
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
Re: (Score:2)
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
Re: (Score:2)
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
Re: (Score:2)
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
Re: (Score:2)
Table layouts get really ugly (Score:2)
Re: (Score:2)
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".
Not Keeping Up. Horseshit. (Score:5, 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.
Re: (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.
Re: (Score:2)
I'm taking that with large grains of salt, soon to be extricated as kidney stones.
Re: (Score:3)
"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.
Royalties continue (Score:2)
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.
Re: (Score:2)
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?
If you link to dynamic libraries (Score:2)
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)
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.
Re: (Score:3)
It *WAS* a "major platform" (Score:2)
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
Re: (Score:2)
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
Re: (Score:2)
Safari is practically the only iOS web browser (Score:2)
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?
Re: (Score:2)
You can turn off Flash, EME, and other proprietary technologies by building Chromium from source, as some GNU/Linux distributions do.
Re: (Score:2)
About that shiny new feature... (Score:2)
Re: (Score:3)
What's the difference between CSS grid layout and BootStrap's grid layout?
One is supported in all browsers and one is not.
Re: (Score:3)
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]
Re: (Score:2)
Very nice, but still no OpenType SVG support (Score:2)
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]