Ten modern layouts in one line of CSS | Hacker News Reader

Ten modern layouts in one line of CSS

web.dev

282 pointssimonpure56 comments

I recently had to code an HTML email signature for the first time and naive me used standard HTML/CSS features. It exploded in all kinds of wonderful ways.

Long story short it took me a week (try something, test it a bit, send it to a larger group of people and fix what broke) and email clients are stuck in the distant past. You have to use fixed-width tables to embed images (but also define the image width in the image tag ! Some clients ignore one or the other), you also have to use tables for layout and style inheritance doesn't really work because clients override styles. The only way to get consistent layout is to embed text in <span> and repeat the styling everywhere.

I also coded something to auto-generate the signature using data from the company intranet and I discovered that when you copy paste HTML code the browser will only copy HTML/CSS code that's actually rendered (you can fix that using draft APIs) but you still have the same problem when pasting the signature in the signature form (roundcube in our case) some duplicates attributes that the browser skip are actually useful for broken mail clients.

I finally got it working but I'd really wish mail clients would use modern web engines. All major mail clients come from organization that also make browsers. I doesn't have to be that painful

Edit: thanks to those who suggested tools to help with that ! It took so long because I was just telling myself, it can't be that broken. Just try that and it should work. I'll definitely try them if I ever have to write email HTML again

Just use tables! Seriously, with display:table css layout gets easy again.

People read emails on their small screen devices, and I think it would challenging to read an email on a small screen made with tables.

Write emails in text and let your email client format it.

For those working with HTML/CSS in email clients here are a couple of sites that can help determine compatibility:

https://caniuse.email/ https://www.campaignmonitor.com/css/

I guess one way to "solve" this is to skip the signature in the email and do what every person working in my kids school do: Write your message in MS Word and make sure it's propperly decorated with clipart. Then mail the wordfile.

Please at least convert it to pdf.

user prints docx and scans the paper to pdf....

I have, for real, recieved emails from the kids school with a photo of the printed word document as an attachment.

I have received emails with an attached word document named xxx.jpg which contained a single page with an single non jpg image of an screenshot of a browser tab containing an image, and yes it was about that image and no "anti-copy" DRM prevented coping that image.

This 1000x! I damn near fell off my chair when i saw my daughter's school do this...then noticed that it was done with ever, single, official memo from the school and asociated school district.

Which makes me feel like here's how things really went down back in the day...(with much respect and admiration to TBL)...

Tim Berners-Lee: Look everyone, there's this thing called the web, where a worldwide network of authors can publish content, and the audience/visitors/recipients accessing said content have plenty of liberty to adjust the style/look of said content to suit their display needs (e.g. increase text size, expand window/width of content, etc.)...So, no one needs to all have/use the same software/application, plus this all helps with accessibility concerns, plus everyone can use different "reading/viewing" as well as authoring software/apps, etc...Cool, right!!

(Almost) Everyone: Nah, we're good.

Tim Berners-Lee: But, wouldn't you want to reap the benefits of the flexibility that the world wide web can afford to everyone?

(Almost) Everyone: We don't understand the flexibility being offered here...We just want the content to behave like books have ever since the late 1500s...nothing should change, every pixel should remain fixed/static, and the control should always exist within the hands of the author, and not the audience/readers. Besides, we will all just use some silly application like MS Word, insert our content and signatures exactly how we want it to display in the Word document (cheesy or not), and add some useless clipart, and control it 100%. That's what we want, and that's what we understand.

Tim Berners Lee: But, don't you see that html docs (or something like that) as published via this world wide web can also help people who struggle financial, or don't have the means of affording tech, etc. since they need not have to purchase all the premium applications to view and edit content?? There can be no-cost or low-cost options for the software that poor folks can use, and even just this can at least slightly help to level things out for inequality, and so much more. Much like the original print press, this - and other aspects of the web - can give many more people access to knowledge and wonderful, essential content!

(Almost) Everyone: Meh. For poor folks who can not afford MS Word, I'm sure Microsoft (and other big companies) will "solve" this by donating "freemium" versions of Word, and de facto establish Word docs as a standard format. Or, people can just borrow more than they can afford, and go into debt to afford the latest, premium technology. Who cares about MS' nefarious business practices. By the way, Mr. Berners-Lee, you should really call your "web thing", something better like "world wide Word docs (wwds)"...plus allow for way more emoji usage, because that would help me avoid having to think and write expressive prose...icons are easier for us to convey meaning, and its not due to our collective laziness, not at all. Just look for instance, how advanced our culture would become if we could, say, deliver cat photos (without much text/content added) as fast as possible to other rich people around the affluent world!?!

Tim Berners-Lee: (Throws his hands up in frustration, focuses the remainder of his career on speech-making, academia, and a few start-ups, and leaves the flock to fend for themselves, which of course get taken over and controlled by for-profit companies.)

;-)

> insert our content and signatures exactly how we want it to display in the Word document

Ironically, most word documents tend to be poorly formatted anyway, as if the original author didn't care at all about formatting.

I'm not sure i agree with "most", but certainly agree that many are poorly formatted...But even then - whether it is most or only some - these authors tend to want to have that "formatting" preserved almost exactly...missing an important point of web documents. :-)

> these authors tend to want to have that "formatting" preserved almost exactly...missing an important point of web documents. :-)

Yes, I agree :). That's why I said "ironically": they want to preserve their formatting, even though it's terrible, and it looks like they didn't want to think about how to format it anyway.

Yep, agreed, i think i read too fast. :-)

Well, at that time it would have maybe more likely to be "Word Perfect", because Word wasn't the total industry dominator that it later came to be.

You're right! Or, maybe WordStar too! lol :-D

With macros to add a reply button

In the future, just use https://mjml.io/. Yes, the HTML it generates is god-awful-ugly, but it does generate responsive emails that render very nicely in almost every client back to Outlook 2010.

The funny part is there isn't even a standard which says which parts of CSS/HTML need to be supported and which not.

Sadly not only HTML is a mess with mails but literally (nearly) every part of it. Is a wonder that mails tense to work in general.

There is a huge amount of nuance to what will work in emails.

I built the lion's share of the WYSIWYG email editor for ActiveCampaign a few years back, and got quite a few horror stories out of it.

There are a lot of tricks that have to be learned, and a lot of trial and error, but responsive emails, that look the same(ish) across most browsers and email clients are possible. I wouldn't want to generate the HTML myself though, as email is stuck ~10 years in the past compared to the web.

Just wanted to post another great resource for developing HTML emails: https://get.foundation/emails/docs/inky.html

If you are someone (like me) who's done CSS/Frontend 'a few years ago' do take a look at this video to see the progression. A lot of things (CENTERING!) which were much harder in the past are now complex but possible. The newer style stanzas will look alien to you.

I'm with you.

First real forays into FE that didn't involve slicing PSDs to tables were in Bootstrap and Foundation in ~2013. The responsive grid those frameworks delivered seemed magical at the time, but you got the sense that the benefits came on the back of some serious CSS wizardry and framework overhead.

The newer CSS features (grid, flexbox) seem so light and magical.

Even after a decade of working with CSS, I’m amused when I see someone center an element inside its container.

I find myself wondering exactly how many different ways there are to center things in CSS.

That is so great. I don't really make website anymore, but we used to struggle to create layouts like these, it awesome to see how much easier it has become.

It should be mentioned that modern layout solutions have much better performance. Have you ever seen how complicated float layouts are struggling during window resize? When using grid or flexbox redraws are almost instant.

of course float layouts are often misuses of float so it's no surprise it struggles.

These are pretty amazing. Not quite one line but very concise nonetheless. I never mess with grid. I use flex regularly though.

They could be, most of them.

Great article.

I don't think it's really correct to call code a one-liner unless a human being would typically write it as one line of code, which is not the case here.

im glad im not the only one that noticed that.

'one liners? half of these are 5 lines of csss...'

Until you actually try them yourself in various browsers (and versions) with dynamically sized content of the elements inside those layouts and see that it is still buggy and not that much has changed and it still needs insane amount of hacks to make the layout work reliable across browsers.

EDIT: The common example when grid and flexbox layouts break is when a child of a child element in the layout overflows.

What are you even talking about?

Sure. Give me a grid or flexbox simple layout and I'll show when it breaks.

Could you set up a little example and submit a bug or two?

https://www.reddit.com/r/webdev/comments/alg8az/anyone_exper... https://bugs.chromium.org/p/chromium/issues/detail?id=927066 ...

Grid and FlexBox have made my life so much easier these days

and fallback is easier with @supports

For the vertical/horizontal centering, this author uses display: grid on the parent and place-items: center. But there is an older way to do just the same, give parent a display of flex and put margin: auto on the child

The thing I want to see in css is a way to define blocks where the height is a percentage of the width. There is a well know hack to do this with padding-bottom but.. yea its a non-intuitive hack.

The post mentions `aspect-ratio`, which isn't available in most browsers yet – will that work for you once it's ready?

ah, shame on me for not reading further. Yea that sounds like just what I'd like, assuming that the aspect ratio block can also contain children (which I'm guessing it will)

Are you referring to this item from TFA?

https://web.dev/one-line-layouts/#10.-respect-for-aspect:-as...

I'm still looking for subgrid though. https://caniuse.com/#feat=css-subgrid

Wow appreciated. Am now seriously considering stripping bootstrap out of my app and replacing with grid and flex. Stuck in 2015 as a front end developer apparently.

Newer versions of bootstrap use flex as the basis.. perhaps you can just try upgrading your bootstrap version?

I use tailwind now and yeah, is much better (if wanna do your own style).

And is much less overall inline-class (I was worried that tailwind mean bigger .html but nope, in fact is less overall)

I used to hate the very idea of Tailwind until I tried it.

I thought about trying tailwind and then saw "Step 1: install via npm"

I am so goddamn sick of having to download a giant mess of JavaScript modules just to use a tool to generate something that has nothing to do with nodejs or it's ecosystem.

It's at the point where I'm in full "crotchety old man" mode and forcing myself to build the entirety of my frontends in pure HTML5/ES6/CSS3.

It's quite liberating, actually.

I hate that too. What sold me the idea is the fact I can use it to heavily reduce the CSS to be exactly what I have used.

I wish instead of npm it have a Go or Rust binary. What it need it for is to generate the .css clases and to prune it for size reduction.

Purgecss is a godsend when you use a third-party CSS library.

wow this website made firefox 38 (corporate lts ..) lose it entirely :)

Just glad to not have to ensure this is compatible with ie6

What is a "modern" layout?

"Works in chrome"

Reply on news.ycombinator.com