back to article Y'know CSS was to kill off HTML table layout? Well, second time's a charm: Meet CSS Grid

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 …

Page:

  1. Winkypop Silver badge
    Thumb Up

    Yay!

    As above

    1. Tom 64
      Pint

      Re: Yay!

      And more yay!

      I will be happy to ditch those ugly media queries =)

      1. werdsmith Silver badge

        Re: Yay!

        You assume too much about end users maintaining their browsers up to the latest version.

        1. AMBxx Silver badge
          Facepalm

          Re: Yay!

          Even bigger frameworks checking browser versions.

          Yay in maybe 5 years

  2. Oengus
    Coat

    Edge

    It's a shame that Edge decided not to join the party, that really would have been the icing on this particular interoperability cake.

    That takes the Edge off the announcements...

    I'll take my coat. It's Pub-O'clock.

    1. Tom 64
      Coat

      Re: Edge

      Well, no-one ever said they were at the bleeding err, edge.

      1. Mark Simon

        Re: Edge

        Unless it’s to say “that bleeding Edge!”

    2. Sil

      Re: Edge

      To be fair, CSS Grid is still a candidate recommendation, not an approved standard.

      1. david 12 Silver badge

        Re: Edge

        >To be fair, CSS Grid is still a candidate recommendation, not an approved standard <

        Wait, /another/ non-stdanderd browser extension ?

        I thought that was supposed to be evil....

  3. Mage Silver badge

    Finally!

    Years ago I was told tables are evil and to use CSS. Except no way did CSS simply allow replacement of simple grids.

    Looks like finally I can ditch tables. I'll have to figure out how to do this in Wordpress pages.

    1. Charlie Clark Silver badge

      Re: Finally!

      Table-based grids were always shit and we've all been able to do better layouts using CSS for over 10 years. Nice to see you catching up! ;-)

      1. DropBear

        Re: Finally!

        " we've all been able to do better layouts using CSS for over 10 years"

        Right, that's why tables are still a fundamental part of the structure of nine out of ten webpages.

        1. joeW

          Re: Finally!

          "tables are still a fundamental part of the structure of nine out of ten webpages."

          Bollocks.

        2. d3vy

          Re: Finally!

          "Right, that's why tables are still a fundamental part of the structure of nine out of ten webpages."

          I challenge you to find ten pages (popular ones - not your mates page advertising his dodgy kodi boxes...) made in the last 5 years that use tables for layout.

          1. Old Handle

            Re: Finally!

            I was curious if this is true, did a quick source peek at a few random web pages. Only Wikipedia used them. And to an extent at least, alot of their content really is table-like.

    2. Graham Dawson Silver badge

      Re: Finally!

      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.

    3. Tom 7

      Re: Finally!

      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.

      1. VinceH

        Re: Finally!

        "Tables have never been a problem"

        ...when used for tabulated data. The problem is that they are often misused for layout purposes.

        1. Tom 7

          Re: Finally!

          And no-one ever has written shit CSS? Its not the tools its the tossers that are let loose with them. I'd put money on CSS grid falling foul to exactly the same problems as <table> did. Designers (I want) and logic (I can) do not fit on the screen together.

          1. Charlie Clark Silver badge

            Re: Finally!

            And no-one ever has written shit CSS?

            Shit CSS does not affect the semantics whereas shit HTML does.

            1. d3vy

              Re: Finally!

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

              1. Charlie Clark Silver badge

                Re: Finally!

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

      2. d3vy

        Re: Finally!

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

        1. Anonymous Coward
          Anonymous Coward

          Re: Finally!

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

    4. bombastic bob Silver badge
      Meh

      Re: Finally!

      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.

      1. d3vy

        Re: Finally!

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

        1. dajames

          Re: Finally!

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

          1. Richard Plinston

            Re: Finally!

            > is also called "pound sign", "hash", "crosshatch" or "octothorpe".

            Note that is "pound (weight) sign", a poorly scratched 'lb', and not UK currency, even though the UK keyboard has the currency sign on the '3' key where others have the hash.

  4. Your alien overlord - fear me

    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?

    1. gv
      Pint

      Some of us have earned some decent wage from having to handle standards + Microsoft.

      1. Anonymous Coward
        Anonymous Coward

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

        1. Charles 9

          "We collectively have the power to stop recommending and start refusing to use Microsoft products."

          Unless, of course, the one who insists on Microsoft signs your paychecks .

        2. h4rm0ny

          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?

          1. d3vy

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

    2. d3vy

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

    3. bombastic bob Silver badge
      Devil

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

      1. d3vy

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

  5. wolfetone Silver badge

    Welcome news, however I think more should be done to improve the rendering of email clients where you still have to use table layouts if you want a consistent presentation for your emails.

    1. Christoph

      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. Any more than it is necessary to attach a Word document to say "Yes I'll be at the pub".

      1. Zippy's Sausage Factory
        Pint

        Any more than it is necessary to attach a Word document to say "Yes I'll be at the pub".

        Can someone please teach that to Outlook?

      2. wolfetone Silver badge

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

      3. Dave559 Silver badge

        Formatted email messages

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

        1. VinceH

          Re: Formatted email messages

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

          1. bombastic bob Silver badge
            Thumb Up

            Re: Formatted email messages

            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.

            1. dajames

              Re: Formatted email messages

              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.

        2. P. Lee

          Re: Formatted email messages

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

    2. Charlie Clark Silver badge

      Apart from my own preference for text/plain I suggest you have a look at this article on A List Apart.

      1. Anonymous Coward
        Anonymous Coward

        Ah, that article explains, in part, why our spam filter is dumping almost all the incoming mail - it's set to reject full html mails because there is nothing worth reading in 99% of them.

        1. Dave559 Silver badge
          Thumb Up

          > "Ah, that article explains, in part, why our spam filter is dumping almost all the incoming mail - it's set to reject full html mails because there is nothing worth reading in 99% of them."

          ...and nothing of value was lost... ;-)

      2. Down not across

        @Charlie Clark

        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.

Page:

POST COMMENT House rules

Not a member of The Register? Create a new account here.

  • Enter your comment

  • Add an icon

Anonymous cowards cannot choose their icon