On a scale of 1 to WTF?



  • ...Just how bad would this idea be?

    I just hate when the business ask me for something impossible. This time it was vertically aligning corresponding 'cousin' elements in different columns - responsively and with arbitrary content. Mercifully, I was backed up by other people on the team that this was impossible and my supervisor agreed we should push back on this, so I almost certainly don't have to do it. But I'd already worked out how to do it...

    I found a way using flexbox and flex order, but that meant I had to remove the container for each column and that meant that I couldn't fall back to un-aligned columns in browsers that don't support that. I'd have to find another way.

    Putting the elements in an incorrect source order obviously works, but that would be wrong. Using absolute positioning combined with flexbox gets the lower section (thankfully I could get away with only aligning two parts of each column) into the right place, but of course, this makes it overlap the next thing on the page.

    Neither of those things are at all acceptable. So I did both.

    I put each lower half of the column twice. The first one was in the correct source order and hanging off the bottom of the top half with absolute positioning; flexbox keeps them in line by making the columns equal height, except on IE9 which is acceptable. The second one was in incorrect source order, but with visibility: hidden, so that all it does is take up exactly the right amount of space.

    I don't have to do this, I'm glad to say, but I really did think for a while I was going to have to, and I couldn't find a less bad way that didn't spit on IE which I'm not allowed to do. If they will demand the impossible, they're going to get hacks. Anyway I thought it might amuse you guys.


  • Java Dev

    I don't know your platform, but isn't this just a case where you shouldn't hesitate to use tables for tabular data?



  • It's not tabular data. It's two sections of similar content which are displayed side by side for aesthetic reasons.



  • This is the kind of post where screenshots and jsfiddle-s might help.


  • Winner of the 2016 Presidential Election

    The worst thing you can do is showcase this to your boss / business.
    Not only will it look to them like you lied to get less work done. They will probably also not understand why its a :wtf: and start asking you to align more stuff all over the place.

    Filed Under: "Can you make our homepage look and behave like a newspaper? No, I don't want to write content like a newspaper. Its supposed to format everything for me and still look great. Also pictures should be added automatically" - request from a teacher when I was in our schools computer course



  • I hear an image is worth a thousand words, because your useless shitty thousand words ain't doing shit to help me visualize what the hell you're blathering about.

    I also don't know what "flexbox" and "flexorder" are. FYI.



  • @blakeyrat said:

    I also don't know what "flexbox" and "flexorder" are. FYI.

    They're CSS properties.



  • @Kuro said:

    The worst thing you can do is showcase this

    QFT



  • I feel bad that you have to support browsers that don't support flex* properties. Flex boxes are god and make the holy grail design a piece of cake.



  • @CarrieVS said:

    It's not tabular data. It's two sections of similar content which are displayed side by side for aesthetic reasons

    If a table would provide a simple solution (I didn't parse what you're trying to do), then you should do it. These tableless ideas are worth when the effort is similar, but doing complex hacks just to avoid using tables is a cargo cult WTF.



  • I actually would have to agree, it sounds like a table is exactly what you want in this situation. Supported by old browsers, aligns content without fuss, etc.


  • BINNED

    Well, the clencher is that, allegedly, Google is going to dock you for that. Not sure if that's still true, if it ever was.

    Of course, this is 🐄 if it's an internal tool or something.



  • @LB_ said:

    I actually would have to agree, it sounds like a table is exactly what you want in this situation.

    Only if I want the page to read, to screen reader users (and even if I thought it was ok to exclude disabled people from using our site, my bosses don't) or without CSS, as [heading of one piece of content] [heading of an unrelated piece of content] [content belonging to the first heading] [content belonging to the second heading].



  • @fbmac said:

    doing complex hacks just to avoid using tables is a cargo cult WTF.

    I've never really seen a good reason to avoid spelling <div> as <table> or <tr> or <td> in cases where doing so makes it easier to persuade browsers to render what you want them to.

    Perhaps the presentation vs. content argument held a bit of water back when most content was static and there were still HTML fanbois determined to boost it as a Claytons LaTeX, but in 2015 the separation between content and presentation happens between database and front end; HTML is firmly part of presentation now, and has almost no semantic value worth worrying about.



  • Just use css to turn a non table element into a table.



  • I don't think that solves the screen reader problem.



  • And can I screen readers find it's way with the crazy div stuff people do to avoid tables? And it really works better than with tables? I never tested, and probably never will, but I read somewhere these things are already well adapted to tables.



  • @fbmac said:

    And can I screen readers find it's way with the crazy div stuff people do to avoid tables?

    Yes, because <div> elements have no attached semantics and unless authors add role or aria-* attributes, will not influence screen reading software in any way. Instead, when you don't go down the scary tables route, you get to use nice stuff like <section> and <header> which make actual sense.

    @flabdablet said:

    HTML is firmly part of presentation now, and has almost no semantic value worth worrying about.

    Because screw search engines and users using assistive technologies, amirite?



  • Try to view these fancy websites with css disabled. It's a horrible mess.



  • @fbmac said:

    Try to view these fancy websites with css disabled. It's a horrible mess.

    If you do it right, the end result will be properly readable.

    What you're describing is a failure on the part of the author of those 'fancy websites' to use the correct structural elements and the correct document order to ensure the content remains readable without the context of visual layout that CSS adds to the mix.

    (Those same fancy websites probably also cannot support reader views or proper , i.e. , @media print based, printing, which all goes back to the same problem: the author being an idiot.)



  • Floats make you put all menus and lateral crap before the useful content. It makes you scroll a lot if you have css disabled.



  • @fbmac said:

    Floats make you put all menus and lateral crap before the useful content. It makes you scroll a lot if you have css disabled.

    Like I said: author being an idiot.

    You use floats to place figures (images, small tables, pull quotes, etc.) on the left or right edge of a box holding a running piece of text that should float around the figure.

    You don't use floats for horizontal layout (unless you are an idiot); you use display:inline-block for horizontal layout. Keeps document order intact, works on every browser that is still relevant in today's age and with a minor hack and some understanding of hasLayout works in IE 7 and below as well (incase you're one of the poor guys that still needs to support those).



  • @fbmac said:

    And can I screen readers find it's way with the crazy div stuff people do to avoid tables

    I don't know what 'crazy div stuff' you're talking about, but I expect it's precisely what I said I needed to avoid. Of course you can put your content in a nonsensical source order without using tables; if that was an acceptable solution this would have been a simple job.


Log in to reply