6 ms·

Rebuilding a featured news section with modern CSS: Vox news

187 points by shadeed 4y ago

superkuh 4y ago
It's not bad. But in older browsers that don't support those new CSS features it always defaults to the single column "small" version even with a large browser window. That's not optimal. The current www.vox.com site displays perfectly fine in older browsers. Sometimes change for the sake of using the latest bleeding edge thing isn't really worth it.
- shadeed 4y ago
  Hello there! The author of the article is here. The main goal of this is to explore the potential of modern CSS in building such a layout. I agree that some of the features aren't supported yet, but that will become better over time. The article shed light on things like container queries, fluid sizing.. etc.
  - kingcharles 4y ago
    Just want to say thank you. Great article and really enjoyed your other about flexbox vs. grid.
  - chrismorgan 4y ago
    I think it would have been worthwhile mentioning browser support in quite a few places: • Container queries have less than a year’s support in any browser; • Style container queries have only an incomplete implementation in Chromium for a month; • :has() isn’t in Firefox yet and has been in other browsers for a year at most. That is: you can’t actually depend on these features yet.
- hanniabu 4y ago
  If you're using older browsers you should be accustomed to a sub optimal experience.
  - motoxpro 4y ago
    Yeah I always think it's strange that because you have made the deliberate choice to not upgrade your browser in years, ignore all of the "feature not supported on your browser" messages, ignoring security updates, etc. that I should be focusing on your experience, instead for the 98% of people who do do those things. Isn't it a deliberate choice to have that experience? Unless you're in an industry that requires not upgrading, backward compatibility is great, up until a point.
    - superkuh 4y ago
      In my case the text to speech software I use to interact with my computer doesn't exist in the same form in modern operating systems. The modern installable version and voices are much worse. So I stick to an old OS that supports my text to speech. But this means my glibc is also an old version. And this OS was released before docker existed in repos (and has no docker support). So I'm using an older brower with JS completely disabled. It displays HTML, text, images, etc pretty well. It's just the for-profit sites that used to cause problems. But now everyone is cargo culting the for-profit stacks, devs are expecting updates to browsers every 2 weeks, and it's getting harder for me. So yeah, I expect it to be hard. But also, people have legitimate reasons for using old software.
      - motoxpro 4y ago
        Totally fair. Thanks for educating me on a proper use case.
- micromacrofoot 4y ago
  if you’re using an older browser there’s a good chance you’re vulnerable to a bunch of security holes too, unfortunately we’re past the days of only updating every 2 years
- lillecarl 4y ago
  https://gs.statcounter.com/browser-market-share https://gs.statcounter.com/browser-market-share Unless you're targeting some really niche market people will have a relatively up2date browser. It's not a problem to use recent features once they've been implemented by Chrome and Safari.
  - 2h 4y ago
    The fact that most browsers aggressively push or even force updates should not be used as a justification for this. You're essentially saying "I want to use this months old API, and fuck you if you still have a browser from last year." People used to respect some amount of backward compatibility.
    - crazygringo 4y ago
      Browsers used to not auto-update. There's no reason to "respect" backwards compatibility in an inherently online product that auto-updates. There's nothing ideological here, it's just about being practical.
      - 2h 4y ago
        not sure about Chrome, but you can turn off update on Firefox. I do this, and for good reason. I dont like the constant churn of browser UI moving around and changing every few months. So users in that situation should not be punished by web devs who only support the bleeding edge browser versions.
        crazygringo 4y ago
        Then that's on you. When 90% of users are on the newest version within a couple weeks, that's not "bleeding edge". It's mainstream. You're also opening yourself up to security vulnerabilities as you browse. If you turn off auto update, it's up to you to accept the consequences of both security risks and of sites breaking.
        4y ago
- Julesman 4y ago
  False. I do professional front end development and haven't browser tested with any rigor in over a year. Who cares about Opera. Seriously.
  - 2h 4y ago
    Totally agree. As long as it works in current Chrome, that's all that matters. https://wikipedia.org/wiki/Poe's_law https://wikipedia.org/wiki/Poe's_law
    - Julesman 4y ago
      Your sarcasm isn't hitting the way you think it is. I've spent enough time doing my job and enough time on CanIUse to know that the era of worrying about browser compatibility is behind us. I dismiss Opera because it's only at 1% use. There has never been an expectation at any point in my 15 years doing that that I should browser test for browsers at !% use. And realistically, the properties that aren't currently browser compatible are one's that I never use and have little need for. Some are cool and will be compatible before long. But I can't really remember the last time I looked up a property I wanted to use and found it would be problematic for anything other than Opera. Granted, my attitude might be different if I was building sites for an international audience.
      - 2h 4y ago
        > I've spent enough time doing my job and enough time on CanIUse to know that the era of worrying about browser compatibility is behind us. Its not. Its just that many developers have stopped caring about it. Google is releasing new APIs at a ridiculous pace, many of which are not needed for a huge chunk of websites. if developers want, they can avoid using newer APIs, or use them but add fallbacks for older browsers. > for anything other than Opera. sure, if you look at the current version of major browsers, support is pretty good for everything. but some users are locked to an old version, either out of personal preference, or work mandates. so its helpful if web developers dont use assume everyone is one the latest browser version. they dont need to support every version of every browser, but I think its reasonable to expect a two year old browser to work with most current websites, and more and more that is not the case.
- traceroute66 4y ago
  > But in older browsers that don't support ... I think, regrettably, that 2023 might be roughly the time where the "old browser" support consideration is finally put to bed. For example, you no doubt have to perform all sorts of code contortions to make things work in old Internet Exploder. It means you have to use old coding methods compared to things that are quicker and easier to implement and get working cross-browser & cross-platform in modern CSS. It also means you are writing more LOC, which means more scope for weird little bugs and time-consuming troubleshooting. Secondly (and perhaps more importantly), making things work in old browsers means you are removing further incentive for people to upgrade. Given the increasing prevalence of browser-based attacks where people can be pwned simply by visiting a website that contains "specially crafted code", I think the quicker everyone gets onto modern browsers the better...
  - dmix 4y ago
    I work a niche B2B product and we basically made this a requirement. Unsurprisingly we’ve had 0 issues asking our customers to use recent versions of Chrome/Edge/Firefox/Safari. Obviously not using super new APIs like @container before they are fully read on these 4 but still that’s still basically every modern feature.
    - nicoburns 4y ago
      At my last company we were selling into the NHS which was traditionally very conservative with browsers (they were one of the last users of IE6). But even they're on Chrome these days.
- petepete 4y ago
  Are users of old browsers likely to be using high resolution displays?
newhotelowner 4y ago
I guess they should focus a little on typography too. Extra strong bold headline with super thin text for the body.
hdlothia 4y ago
So much respect for css devs. That stuff makes my head spin
- cubefox 4y ago
  CSS must be fun to use nowadays, with tons of flexibility and great browser support. I remember the days when you couldn't even rely on CSS2 because IE6 didn't support it, apart from having serious rendering bugs.
  - dmix 4y ago
    Once CSS gets nesting [1] natively (ie, not having to use SCSS or Postcss) the total sum of improvements it will be 100x less annoying vs the early 2000s. Variables, grids, flex, container/media queries, math functions, clamp [2] etc make life so much easier. The last thing is mixins/functions, but not sure if there's an RFC for that. [1] https://www.w3.org/TR/css-nesting-1/ https://www.w3.org/TR/css-nesting-1/ [2] https://developer.mozilla.org/en-US/docs/Web/CSS/clamp https://developer.mozilla.org/en-US/docs/Web/CSS/clamp
    - pers0n 4y ago
      CSS needs baseline rhythm for typography. I hope it happens in the next decade
  - Julesman 4y ago
    It's AWESOME!!! IE died! Bloated frameworks have become irrelevant! No more modernizers. You can just use it the way it's supposed to be used. And let me take the opportunity to diss the failure that is mixing your styles into your layout with Tailwind and it's endless and illegible bloat of unreadable html.
    - jsyolo 4y ago
      And let me take the opportunity to diss the failure that is mixing your styles into your layout with Tailwind and it's endless and illegible bloat of unreadable html. Reading the bloated HTML is less painful than dealing with all the cascading crap.
dmix 4y ago
TIL about CSS Container Queries https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Contain... That technique of using a style tag to set a CSS var (--horizontal) then using @container tags to shift the UI is really cool. <div class="c-newspaper__item" style="--horizontal: true;"> <article class="c-card"></article> </div> .c-newspaper__item { container-type: inline-size; container-name: card; } @container card (min-width: 300px) and style(--horizontal: true) { .c-card { display: flex; gap: 1rem; } } Also, as someone who learned CSS in the early 2000s, seeing grid layouts with `grid-template-columns:` etc make life so much easier. Web devs have it easier these days.
- winkywooster 4y ago
  the last line makes me laugh.. while it's true grid layouts make things so much easier then back in the 2000s, web dev today is still just as hard, but for different reasons.
  - motoxpro 4y ago
    I'll take anything over the days of float: left;
    - oneeyedpigeon 4y ago
      float: left is still useful, of course, just for what it was intended rather than what it was abused for.
      - johndunne 4y ago
        float: left taught me to never skimp on understanding the things you're using to try do the things your doing!
  - nicoburns 4y ago
    > web dev today is still just as hard, but for different reasons As someone who did webdev back in the 2000s and still does it now, I do not agree with this at all. Webdev is easy now. Especially with the development of simpler build systems (esbuild, vite, etc) in the couple of years.
freewizard 4y ago
thanks for sharing the experience and thoughts behind it. I just went thru a similar page redesign and your layout experience resonate with mine. totally agree flex is probably the most overkilling choice here. I end up not go with grid but old pal float in 3 col view, mainly bc my use case is not typical [L, M, R] -> [L, M/R] -> [L/M/R] layout pattern, but more complex [L1/L2, M, R1/R2] -> [L1/R1/L2/M/R2], and the variable height of each part make the height attribute very difficult to manage in 3 col view.
traceroute66 4y ago
Reading that blog, I see lots of arbitrary widths everywhere. Whilst it works, and the presented code is certainly clean enough, it could be argued that such techniques are not really true modern CSS, something flex based would likely be the true modern way. See, for example, the approach taken by Every Layout: https://every-layout.dev/layouts/sidebar/ https://every-layout.dev/layouts/sidebar/
- kitsunesoba 4y ago
  Even outside of the web arbitrary absolute dimensions are rarely the correct way to do things. It means that your content/app/etc is rendering badly on some set of screens/form factors and usually breaks accessibility affordances like increased font sizes/weights and font substitution.
  - lelandfe 4y ago
    Meh. "Add a new breakpoint when things look bad" has worked pretty well for the web for a long time. Also, all browsers these days just do a fancy page zoom instead of directly manipulating font size. It's a much better setup than what we had to do in days of yore, e.g. using different units on different properties so that things didn't fall apart on size increase.
    - wizzwizz4 4y ago
      > Also, all browsers these days just do a fancy page zoom instead of directly manipulating font size. This is very not true. Hit Alt V Z T in Firefox, for example. It's even on WebAIM's accessibility checklist (https://webaim.org/resources/evalquickref/#scaling https://webaim.org/resources/evalquickref/#scaling), which makes it important: that list is very selective. Microsoft Edge on Windows 10 has at least three different kinds of zoom, depending on which input device you use to trigger it. (Multiple types of zoom: good. None of the keyboard / mouse / touchpad bindings doing the same? Bad.)
      - lelandfe 4y ago
deleted 4y ago
[deleted]
hliyan 4y ago
I'm not by any measure a CSS expert, but whatever became of the idea of semantic HTML (or even XML files styled with CSS https://www.w3.org/TR/CSS21/intro.html#xml-tutorial https://www.w3.org/TR/CSS21/intro.html#xml-tutorial)? I've been noticing that there is little difference between the sizes of HTML payloads and JSON payloads when extraneous tag hierarchies are eliminated. I've half a mind to replace some of my React SPAs with old fashioned server side templating (not SSR). Event without using techniques like HTMX to replace partials, things seem to run faster and backend development becomes so much easier.

187 points by shadeed 4y ago

It's not bad. But in older browsers that don't support those new CSS features it always defaults to the single column "small" version even with a large browser window. That's not optimal. The current www.vox.com site displays perfectly fine in older browsers. Sometimes change for the sake of using the latest bleeding edge thing isn't really worth it.

shadeed 4y ago
Hello there! The author of the article is here. The main goal of this is to explore the potential of modern CSS in building such a layout. I agree that some of the features aren't supported yet, but that will become better over time. The article shed light on things like container queries, fluid sizing.. etc.
- kingcharles 4y ago
  Just want to say thank you. Great article and really enjoyed your other about flexbox vs. grid.
- chrismorgan 4y ago
  I think it would have been worthwhile mentioning browser support in quite a few places: • Container queries have less than a year’s support in any browser; • Style container queries have only an incomplete implementation in Chromium for a month; • :has() isn’t in Firefox yet and has been in other browsers for a year at most. That is: you can’t actually depend on these features yet.
hanniabu 4y ago
If you're using older browsers you should be accustomed to a sub optimal experience.
- motoxpro 4y ago
  Yeah I always think it's strange that because you have made the deliberate choice to not upgrade your browser in years, ignore all of the "feature not supported on your browser" messages, ignoring security updates, etc. that I should be focusing on your experience, instead for the 98% of people who do do those things. Isn't it a deliberate choice to have that experience? Unless you're in an industry that requires not upgrading, backward compatibility is great, up until a point.
  - superkuh 4y ago
    In my case the text to speech software I use to interact with my computer doesn't exist in the same form in modern operating systems. The modern installable version and voices are much worse. So I stick to an old OS that supports my text to speech. But this means my glibc is also an old version. And this OS was released before docker existed in repos (and has no docker support). So I'm using an older brower with JS completely disabled. It displays HTML, text, images, etc pretty well. It's just the for-profit sites that used to cause problems. But now everyone is cargo culting the for-profit stacks, devs are expecting updates to browsers every 2 weeks, and it's getting harder for me. So yeah, I expect it to be hard. But also, people have legitimate reasons for using old software.
    - motoxpro 4y ago
      Totally fair. Thanks for educating me on a proper use case.
micromacrofoot 4y ago
if you’re using an older browser there’s a good chance you’re vulnerable to a bunch of security holes too, unfortunately we’re past the days of only updating every 2 years
lillecarl 4y ago
https://gs.statcounter.com/browser-market-share https://gs.statcounter.com/browser-market-share Unless you're targeting some really niche market people will have a relatively up2date browser. It's not a problem to use recent features once they've been implemented by Chrome and Safari.
- 2h 4y ago
  The fact that most browsers aggressively push or even force updates should not be used as a justification for this. You're essentially saying "I want to use this months old API, and fuck you if you still have a browser from last year." People used to respect some amount of backward compatibility.
  - crazygringo 4y ago
    Browsers used to not auto-update. There's no reason to "respect" backwards compatibility in an inherently online product that auto-updates. There's nothing ideological here, it's just about being practical.
    - 2h 4y ago
      not sure about Chrome, but you can turn off update on Firefox. I do this, and for good reason. I dont like the constant churn of browser UI moving around and changing every few months. So users in that situation should not be punished by web devs who only support the bleeding edge browser versions.
      - crazygringo 4y ago
        Then that's on you. When 90% of users are on the newest version within a couple weeks, that's not "bleeding edge". It's mainstream. You're also opening yourself up to security vulnerabilities as you browse. If you turn off auto update, it's up to you to accept the consequences of both security risks and of sites breaking.
        4y ago
Julesman 4y ago
False. I do professional front end development and haven't browser tested with any rigor in over a year. Who cares about Opera. Seriously.
- 2h 4y ago
  Totally agree. As long as it works in current Chrome, that's all that matters. https://wikipedia.org/wiki/Poe's_law https://wikipedia.org/wiki/Poe's_law
  - Julesman 4y ago
    Your sarcasm isn't hitting the way you think it is. I've spent enough time doing my job and enough time on CanIUse to know that the era of worrying about browser compatibility is behind us. I dismiss Opera because it's only at 1% use. There has never been an expectation at any point in my 15 years doing that that I should browser test for browsers at !% use. And realistically, the properties that aren't currently browser compatible are one's that I never use and have little need for. Some are cool and will be compatible before long. But I can't really remember the last time I looked up a property I wanted to use and found it would be problematic for anything other than Opera. Granted, my attitude might be different if I was building sites for an international audience.
    - 2h 4y ago
      > I've spent enough time doing my job and enough time on CanIUse to know that the era of worrying about browser compatibility is behind us. Its not. Its just that many developers have stopped caring about it. Google is releasing new APIs at a ridiculous pace, many of which are not needed for a huge chunk of websites. if developers want, they can avoid using newer APIs, or use them but add fallbacks for older browsers. > for anything other than Opera. sure, if you look at the current version of major browsers, support is pretty good for everything. but some users are locked to an old version, either out of personal preference, or work mandates. so its helpful if web developers dont use assume everyone is one the latest browser version. they dont need to support every version of every browser, but I think its reasonable to expect a two year old browser to work with most current websites, and more and more that is not the case.
traceroute66 4y ago
> But in older browsers that don't support ... I think, regrettably, that 2023 might be roughly the time where the "old browser" support consideration is finally put to bed. For example, you no doubt have to perform all sorts of code contortions to make things work in old Internet Exploder. It means you have to use old coding methods compared to things that are quicker and easier to implement and get working cross-browser & cross-platform in modern CSS. It also means you are writing more LOC, which means more scope for weird little bugs and time-consuming troubleshooting. Secondly (and perhaps more importantly), making things work in old browsers means you are removing further incentive for people to upgrade. Given the increasing prevalence of browser-based attacks where people can be pwned simply by visiting a website that contains "specially crafted code", I think the quicker everyone gets onto modern browsers the better...
- dmix 4y ago
  I work a niche B2B product and we basically made this a requirement. Unsurprisingly we’ve had 0 issues asking our customers to use recent versions of Chrome/Edge/Firefox/Safari. Obviously not using super new APIs like @container before they are fully read on these 4 but still that’s still basically every modern feature.
  - nicoburns 4y ago
    At my last company we were selling into the NHS which was traditionally very conservative with browsers (they were one of the last users of IE6). But even they're on Chrome these days.
petepete 4y ago
Are users of old browsers likely to be using high resolution displays?

newhotelowner 4y ago

I guess they should focus a little on typography too. Extra strong bold headline with super thin text for the body.

hdlothia 4y ago

So much respect for css devs. That stuff makes my head spin

cubefox 4y ago
CSS must be fun to use nowadays, with tons of flexibility and great browser support. I remember the days when you couldn't even rely on CSS2 because IE6 didn't support it, apart from having serious rendering bugs.
- dmix 4y ago
  Once CSS gets nesting [1] natively (ie, not having to use SCSS or Postcss) the total sum of improvements it will be 100x less annoying vs the early 2000s. Variables, grids, flex, container/media queries, math functions, clamp [2] etc make life so much easier. The last thing is mixins/functions, but not sure if there's an RFC for that. [1] https://www.w3.org/TR/css-nesting-1/ https://www.w3.org/TR/css-nesting-1/ [2] https://developer.mozilla.org/en-US/docs/Web/CSS/clamp https://developer.mozilla.org/en-US/docs/Web/CSS/clamp
  - pers0n 4y ago
    CSS needs baseline rhythm for typography. I hope it happens in the next decade
- Julesman 4y ago
  It's AWESOME!!! IE died! Bloated frameworks have become irrelevant! No more modernizers. You can just use it the way it's supposed to be used. And let me take the opportunity to diss the failure that is mixing your styles into your layout with Tailwind and it's endless and illegible bloat of unreadable html.
  - jsyolo 4y ago
    And let me take the opportunity to diss the failure that is mixing your styles into your layout with Tailwind and it's endless and illegible bloat of unreadable html. Reading the bloated HTML is less painful than dealing with all the cascading crap.

dmix 4y ago

TIL about CSS Container Queries https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Contain... That technique of using a style tag to set a CSS var (--horizontal) then using @container tags to shift the UI is really cool. <div class="c-newspaper__item" style="--horizontal: true;"> <article class="c-card"></article> </div> .c-newspaper__item { container-type: inline-size; container-name: card; } @container card (min-width: 300px) and style(--horizontal: true) { .c-card { display: flex; gap: 1rem; } } Also, as someone who learned CSS in the early 2000s, seeing grid layouts with `grid-template-columns:` etc make life so much easier. Web devs have it easier these days.

winkywooster 4y ago
the last line makes me laugh.. while it's true grid layouts make things so much easier then back in the 2000s, web dev today is still just as hard, but for different reasons.
- motoxpro 4y ago
  I'll take anything over the days of float: left;
  - oneeyedpigeon 4y ago
    float: left is still useful, of course, just for what it was intended rather than what it was abused for.
    - johndunne 4y ago
      float: left taught me to never skimp on understanding the things you're using to try do the things your doing!
- nicoburns 4y ago
  > web dev today is still just as hard, but for different reasons As someone who did webdev back in the 2000s and still does it now, I do not agree with this at all. Webdev is easy now. Especially with the development of simpler build systems (esbuild, vite, etc) in the couple of years.

freewizard 4y ago

thanks for sharing the experience and thoughts behind it. I just went thru a similar page redesign and your layout experience resonate with mine. totally agree flex is probably the most overkilling choice here. I end up not go with grid but old pal float in 3 col view, mainly bc my use case is not typical [L, M, R] -> [L, M/R] -> [L/M/R] layout pattern, but more complex [L1/L2, M, R1/R2] -> [L1/R1/L2/M/R2], and the variable height of each part make the height attribute very difficult to manage in 3 col view.

traceroute66 4y ago

Reading that blog, I see lots of arbitrary widths everywhere. Whilst it works, and the presented code is certainly clean enough, it could be argued that such techniques are not really true modern CSS, something flex based would likely be the true modern way. See, for example, the approach taken by Every Layout: https://every-layout.dev/layouts/sidebar/ https://every-layout.dev/layouts/sidebar/

kitsunesoba 4y ago
Even outside of the web arbitrary absolute dimensions are rarely the correct way to do things. It means that your content/app/etc is rendering badly on some set of screens/form factors and usually breaks accessibility affordances like increased font sizes/weights and font substitution.
- lelandfe 4y ago
  Meh. "Add a new breakpoint when things look bad" has worked pretty well for the web for a long time. Also, all browsers these days just do a fancy page zoom instead of directly manipulating font size. It's a much better setup than what we had to do in days of yore, e.g. using different units on different properties so that things didn't fall apart on size increase.
  - wizzwizz4 4y ago
    > Also, all browsers these days just do a fancy page zoom instead of directly manipulating font size. This is very not true. Hit Alt V Z T in Firefox, for example. It's even on WebAIM's accessibility checklist (https://webaim.org/resources/evalquickref/#scaling https://webaim.org/resources/evalquickref/#scaling), which makes it important: that list is very selective. Microsoft Edge on Windows 10 has at least three different kinds of zoom, depending on which input device you use to trigger it. (Multiple types of zoom: good. None of the keyboard / mouse / touchpad bindings doing the same? Bad.)
    - lelandfe 4y ago

deleted 4y ago

[deleted]

hliyan 4y ago

I'm not by any measure a CSS expert, but whatever became of the idea of semantic HTML (or even XML files styled with CSS https://www.w3.org/TR/CSS21/intro.html#xml-tutorial https://www.w3.org/TR/CSS21/intro.html#xml-tutorial)? I've been noticing that there is little difference between the sizes of HTML payloads and JSON payloads when extraneous tag hierarchies are eliminated. I've half a mind to replace some of my React SPAs with old fashioned server side templating (not SSR). Event without using techniques like HTMX to replace partials, things seem to run faster and backend development becomes so much easier.