Yay!
As above
With the release of Safari 10.1 this week, four major browsers in the space of a month have implemented support for CSS Grid, an emerging standard for two-dimensional grid layouts in web applications. For front-end web designers, this is a big deal. In a tweet, Eric Meyer, web development author and co-founder of A List Apart …
That's because tables were evil. Entirely inflexible and semantically retarded, and they made screenreaders throw a fit. They also couldn't be reshaped for differing screen resolutions and broke up the flow of content in arbitrary ways.
Some of the replacement techniques have been nearly as verbose, but they at least separated content from presentation and are easier on screen readers.
With this, all you need as a set of divs and a few css rules. The flow becomes entirely natural and there is no overlap between content and presentation at all. They're nothing like tables except in the final appearance.
"And no-one ever has written shit CSS?"
Plenty of people write shit CSS, but the thing is as long as the site renders and looks like its meant to it doesnt matter how shit the css is.
The HTML on the other hand does affect people - mainly people with visual impairments using screen readers.
The whole point of CSS was to decouple the style and layout of the page from the content with bootstrap and others there has been a bit of a blending again where we find ourselves having to craft HTML is special sometimes awkward ways in order to fit in with the pre-determined CSS & JS
As an example using bootstrap to create a single form element requires me to create two divs a label and an input, the way that we did this back in the old days would have been a table - the only real improvement bootstrap gives us in this case is that it will scale for mobiles.
The way we would have done it before bootstrap (the way I still prefer) would be to have an unordered list with each list item containing a label and an input then CSS to layout the form in a sensible way.
The way we would have done it before bootstrap…
I would suggest you look at Pure CSS is has a similar feature set but is much smaller and less verbose than Bootstrap.
Though I think that form elements are moving more and more to REST (largely due to the inability of the W3C or WHATWG to fix the specification).
"Tables have never been a problem. If you think tables are a problem I'd write to your primary school and demand the teddy bear gets some more IT teacher training"
Tables are not a problem when they are used to display tabular data.
When they are used for *layout* (Which is what this about) is when there starts to be issues.
The problem is to use tables to layout a three column page with a header and a footer you need a table with three rows (One large cell in row one, three cells in row two and one large cell in row 3).
This will NOT scale well on different devices.
This will NOT be accessible to people using screen readers.
This will use more bandwidth to download and take longer to render on the clients browser.
Then there are the development challenges, this is the markup required to generate the table described above
https://jsfiddle.net/xxjgpxvm/
Now imagine we need to add a fourth column into the middle on *SOME* pages, its not that bad but becomes a bit of a problem. Now add into the mix that if we are not using CSS for layouts that your menu is probably going to be rendered in a table -get ready for the nested tables- because thats how it was done...
https://jsfiddle.net/xxjgpxvm/1/
As much as I am being filled with nostalgia about this, I never want to return to the kinds of complex table based designs I used to work with 10-15 years ago - tables are for displaying TABULAR data thats the only thing they should be used for. Using a table to layout a web page in 2017 would be mental - if I had a designer who did this it would be the last proposal they submitted to me.
>This will NOT be accessible to people using screen readers.
It's 2017 not 2010. Screenreader developers look at real world content not aged guidelines written by idealogues. If you markup your layout tables with role="presentation" modern screenreaders will switch to Screen Layout Mode and equivalents. Older screenreaders which don't understand Web-ARIA (and most AT doesn't as it happens) will assume a layout table so as long as there's no semantic markup.
On a tabloid site like El Reg, well-crafted layout tables would offer a better/more equivalent experience for screenreader users than using css (css grids to boot) in achieving the same (ie visually semantic) layout.
I use table for general formatting a lot of times. it's more convenient and renders consistently everywhere I look. Let's hope 'table' doesn't get dropped from the HTML spec as a result of a CSS alternative. That would be like dropping 'C' as a programming language in favor of C-pound or Objective C... no, wait.
"I use table for general formatting a lot of times. it's more convenient and renders consistently everywhere I look. Let's hope 'table' doesn't get dropped from the HTML spec as a result of a CSS alternative. That would be like dropping 'C' as a programming language in favor of C-pound or Objective C... no, wait"
For a start, its SHARP - as in the musical notation - but you knew that already.
No one is suggesting getting rid of tables for laying out tabular data, thats what they are for.
Now as for your suggestion that you use table for layout of your pages... great, give me the URL so I can have a look at it on my phone...
For a start, its SHARP - as in the musical notation - but you knew that already.
No it isn't -- it's C#. That '#' character is Unicode "U+0023 NUMBER SIGN", which the gnome character map program notes is also called "pound sign", "hash", "crosshatch" or "octothorpe".
That's how Microsoft spell it, on here the MSDN website, for example. So, despite what Microsoft may claim, the language is "C Hash" (or "C Pound" if you prefer, but on this side of the pond we reserve the name "pound" for "U+00A3 POUND SIGN").
That's quite different from "C♯" ... that '♯' character is "U+266F MUSIC SHARP SIGN".
"Some of us have earned some decent wage from having to handle standards + Microsoft."
...and many of you will live shorter lives due to the stress and burn in hell for encouraging Microsofts behaviour.
Why as engineers do we have to keep taking this shit.
We collectively have the power to stop recommending and start refusing to use Microsoft products.
Personally, I only support MS platforms if they are pre-existing in an environment and there is an incredible amount of money in the budget. Especially desktop side.
If its greenfield, then I avoid Microsoft products like STDs.
Ive successfully rolled out various flavours of Linux at many firms (some rather large)...I can count on a fingerless hand how many support tickets get logged on an average week.
Strong arguments, solid training and a thoroughly tested and demonstrated deployment is all it takes.
The clinging to MS that a lot of businesses exhibit is due to fear of the unknown. Alleviate that fear and you'll win.
Im not even nailed to Linux, if somethong blows it out of the water ill probably start recommending that as well as Linux.
Right now, with Gnome 3.24, NVIDIA and Wayland (with EGL), Linux has never felt so solid.
This year could be the year of Li...
*gets bundled to the ground and gagged by a group of blue chip thugs*
Mmmfph nnnghff phnnnnnrrgh!
"Not to blunt your righteous rant, AC, but you are aware that this CSS grid is not currently a standard? It's a candidate release. I mean, you're talking a lot about standards so I'm sure do. Don't you?"
Of course they dont, this will be one of the people who was hacking away at getting HTML5 sites pumped out back in 2014 and then complaining that they didnt look right in Firefox Safari and IE.
Implementing non standard features is what got microsoft shafted in the 90s - its WHY WE ARE STILL STUCK WITH IE6 in corporate environments.
Timeline :
1. Someone proposes some awesome HTML5/CCS3 feature.
2. Browser manufacturers all rush out to implement it.
3. Designers/Developers all develop their apps to use it.
4. Standard agreed (With differences from the proposal)
5. Sites start breaking as the new standard is rolled out.
This is exactly why we used to have to have CSS hacks and conditional HTML comments, so we could target different browsers to use the different implementations of the same thing.
This is something that I see creeping back more and more now... Its like stepping back in time - I honestly thought we were past it but nope, apparently we are doomed to repeat it.
The one good thing is that the browser manufacturers seem to be communicating more so there is a better chance that the implementations for this change will at least be similar.
I still think anyone going out and using ANYTHING that has been proposed but not yet made a standard in a production application (Unless they control the browser like in a corp environment*) is asking for trouble.
* Actually given that I do work for the NHS and have to target IE6 still because of this attitude I take that back - even if you have tight control over the clients your asking for it.
"So web developers will *still* be having to write 2 sets of code, one for Microslow browsers and one for the rest. Been like that for decades so what's new?"
No,
Sensible developers will continue working to the standards that are common across all popular browsers which means anyone going out and developing using this today is probably a little inexperienced.
That said, https://www.w3counter.com/globalstats.php?year=2017&month=2 shows that IE usage has dropped WAAAAY below where it was last time I looked, still if I was creating a new web app today I'd definitely not want to use a technique that wont work on 10% of the clients trying to use my service.
"So web developers will *still* be having to write 2 sets of code, one for Microslow browsers and one for the rest."
an old standard, put a small banner at the top "this site looks best in Firefox or Chrome or Safari" with links to the appopriate packages. SHAME Micro-shaft into doing the right thing.
"an old standard, put a small banner at the top "this site looks best in Firefox or Chrome or Safari" with links to the appopriate packages. SHAME Micro-shaft into doing the right thing."
I hope thats a joke?
If not can I suggest we go right back to the 90s and also give them an optimal resolution of 800*600 (maybe 1024*768 if you're feeling fancy)
Ill just finish by pointing out as others have done that this is NOT A STANDARD *yet*, MS are doing nothing wrong by not implementing it yet.
"You can get a perfectly consistent presentation of your emails by using plain text."
I know that. But the guy who pays my wages doesn't believe that. And I can't pay a mortage telling the bank "Well I could pay you what I owe if I had it, but I told the boss he was wrong about HTML emails and he sacked me."
> "You can get a perfectly consistent presentation of your emails by using plain text. It it not actually necessary to have whizzy layout and graphics and presentation to send a simple message."
Indeed. Nowadays, I'll grudgingly concede that there is perhaps a place in certain email messages for simple HTML (headings, em, strong, lists, links, possibly even a splash of colour) where appropriate, but since every(?) email client rightly and sensibly disables the loading of remote images by default, why do the marketing weasels even bother to waste their time trying to include images, columns, and similar fancy formatting in emails? (Perhaps especially columns: emails are inherently infinitely scrollable, so why waste time and effort and eye movement on obsolete columnar layout?)
Does anybody ever actually see the linked images in emails? I certainly don't, and I don't ever plan to enable them (especially since I now more often read emails via mobile where I would really rather not splurge bandwidth unnecessarily).
I'd point the finger at a certain bunch of dumb monkeys who sadly seem to have cornered a large market share in pointless email "glossy toilet paper" production..
"Does anybody ever actually see the linked images in emails? I certainly don't, and I don't ever plan to enable them"
Generally speaking, no. I will grudgingly display images in a specific email if I feel I need to see them in that particular instance, but that's very rare.
However, on the subject of HTML emails, I'm just going to leave this thing I've noticed happening amongst some of my clients here.
However, on the subject of HTML emails, I'm just going to leave this thing I've noticed happening amongst some of my clients here.
(re: link) good article on e-mails. I particularly like the section that shows the *WRONG*-ness of top-posting. I included the link in my quote for reference.
I believe HTML e-mail to be evil. It is MOSTLY a source of infections, phishing scams, unwanted bandwidth waste, crufty chain letters [with ads at the bottom], lame humor, spamming, and unnecessary irritation. Any e-mail that says "you must view this in HTML to see the content" gets an automatic 'mark as spam' or deletion from me. I only view e-mail in plain text. It's part of "safe surfing", too.
In my corporation, it would be a company policy to ONLY sent plain text, NEVER top post, and configure all e-mail clients to view/compose in plain text only. And it would probably save space on the mail server, bandwidth on the intarwebs, and time dealing with interoffice communication.
In my corporation, it would be a company policy to ONLY sent plain text, ...
I bet you just love those emails that are sent in multipart/alternative with the message only in the HTML part, and a text/plain part that just says "Click here to view this email in your browser" ... but, of course, clicking has no effect because it's plain text and your mail client isn't 'clever' enough to recognize the URL as a URL and make it a clickable link.
>(Perhaps especially columns: emails are inherently infinitely scrollable, so why waste time and effort and eye movement on obsolete columnar layout?)
Because most screens have stupid 16:9 ratios which means we want to spread the data across rather than having to page down. I think the correct resolution is to have portrait A4 + a bit screens but that won't happen unless someone gets really clever with laptops.
Unfortunately, it is really difficult to read text running straight across a 27" screen. What we want is to break it up into something like A5 width columns/screen height (or maybe A4 if you have work documents) and have the display system add A5/A4-width columns as space allows. Basically, like the firefox epub reader.
Apart from my own preference for text/plain I suggest you have a look at this article on A List Apart.
From that page:
It’s an old saw that email design is stuck in the past. For the longest time, developers have been forced to revisit coding techniques that were dated even back in the early 2000s if they wanted to build an HTML email campaign. Locked into table-based layouts and reliant on inline styles, most developers refused to believe that email could do anything more than look serviceable and deliver some basic content to subscribers.
For a few email developers, though, frustrating constraints became inspiring challenges and the catalyst for a variety of paradigm-shifting techniques.
Aaargh! Yes I stopped reading at that point before violent tendencies (towards the, in this case, fairly innocent computer) got out of hand.
It being World Backup Day, can't we just restore to when email was just plain text.
Hopefully El Reg will keep it 90s by still using the default HTML 4.0 table style...
I don't get it, sorry – HTML tables are still valid in HTML5, and are/should be used when presenting tabular data.
Granted, the table in that article looks like crap and it uses attributes which shouldn't really be used in HTML5 – but that's the default rendering of a table in a browser, mind you…
IMVHO, using tables for tabular data like in that article is totally fine, but using it to lay stuff out is not. What are your thoughts?
"IMVHO, using tables for tabular data like in that article is totally fine, but using it to lay stuff out is not. What are your thoughts?"
it would depend on a lot. A simple way to center a quote, for example might be like this:
blah blah blah textᐸbrᐳ
ᐸtable align=center width="95%"ᐳᐸtrᐳᐸtdᐳ
ᐸbᐳblah blah blah quoted areaᐸ/bᐳ
ᐸ/tdᐳᐸ/trᐳᐸ/tableᐳ
blah blah continuing on
(I used 'ᐳ' for '>', 'ᐸ' for '<' to avoid HTML filtering, re-interpretation, whatever)
All of that could be typed in with a regular text editor, no special authoring tools, by someone with a basic knowledge of HTML and formatting.
simple, fast, effective, LOW BANDWIDTH. what more do you need?
"it would depend on a lot. A simple way to center a quote, for example might be like this:
blah blah blah textᐸbrᐳ
ᐸtable align=center width="95%"ᐳᐸtrᐳᐸtdᐳ
ᐸbᐳblah blah blah quoted areaᐸ/bᐳ
ᐸ/tdᐳᐸ/trᐳᐸ/tableᐳ
blah blah continuing on"
Are you on drugs?
You can do the same thing with a p tag and text-align=centre
Simpler, Faster, LOWER BANDWIDTH, easier to understand when reading the HTML.
Whats more MY WAY WORKS - dont take my word for it : https://jsfiddle.net/x0bawqdL/
Hmmm. Tables for tabular data need to be marked up very clearly, and then they are a bit of a pain but less of a pain that just having cell contents read out without any hint of 'navigation', so to speak, of where you are.
Tables for layout: hear my screams. Never, no, and no. CSS Grid looks like an answer to my prayers, as I have a lot of these to do and flexbox, while fine, is kinda a pain.
I did notice that CSS Grid only pertains to the latest browsers, and for fun tried it out on the selection of browsers I know our corporate web visitors mostly use. Yep, failed for all of them, which I expected, but I kept hoping magic would happen. Magic did not happen. It never happens.*
*except once it did, for a strange reason, and now I expect to be blessed
Unfortunately this strongly favours building a specific fad design. The likes of tumblr or pinterest, where you infinitely scroll random shit until you close the site, or kill yourself.
You mean those sites where the contact, feedback, etc links are all a the bottom of the page, but since the site will continuously load new content you can never reach the bottom? Yeah, those designers should be forced to retrieve their paychecks by clicking on a link on the bottom of their own sites.
I don't think that's really true. That illustration in the article was just an example comparing grid to flexbox. After reading up on grid a bit (I must admit I never heard of it before) I have to say it actually looks very handy. It can easily solve classic layout needs like header/content/sidebar/footer that web designers might otherwise be tempted to use a table for.
Here's the article I read. Looks like it was originally written some time ago so I can't be sure it's up to date and complete.
Grid layout isn't really very much like table layout at all, and we have table layout in CSS if you want to make non-tabular things behave like a table. Grid layout is all designed in CSS so very different to tables, and also to the layout methods that came before.
I've been talking about this upcoming spec for a good few years. If you want to learn how specific features work then I have a bunch of video here: http://gridbyexample.com/video I also wrote the docs for MDN, if you prefer lots of words and code examples https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
I suppose the key difference, vs Microsoft's history of being 'non standard', is that all these other browsers are available on pretty much all operating systems.
If you build something to only work on Internet Explorer or Edge, then you're forcing the users to use your operating system, and forcing them to upgrade their operating system when you stop providing updates to your browser on the customer's version of the operating system.