8 ms·

Defensive CSS

377 points by jacobr 4y ago

mrcartmeneses 4y ago
Some really nice tips here.
flanbiscuit 4y ago
Previous discussion: https://news.ycombinator.com/item?id=29504784 https://news.ycombinator.com/item?id=29504784 Not the same exact link but same author. Looks like he turned his post into a full-blown site.
BiosElement 4y ago
Really love the togglable examples. It's often hard to imagine how a change look and while in a perfect world I'd have time to make a mockup to test each version, well, it's hardly a perfect world so examples are appreciated!
- 8n4vidtmkvmk 4y ago
  the examples are certainly nice but it only takes a second to resize your browser when testing your own site
  - account42 4y ago
    You don't even need to resize the whole browser window - you can use the responsive design mode of your browser's development tools to resize just the viewport of the website you are working on. And it can even emulate touch interfaces to test the relevant media queries. And resizing the window is also something native application developers should embrace. Always roll my eyes when some game developer says they can only target 16:9 because they don't have other monitors - just make your window mode resizable and drag the corner.
thex10 4y ago
I will trust any CSS content from Ahmad Shadeed, I am continually impressed and I've been developing CSS my whole career.
- earthboundkid 4y ago
  Seconded.
- dgb23 4y ago
  Agreed. It's one of the few CSS related blogs I'm subscribed to via RSS.
- victor106 4y ago
  His book Debugging CSS is highly recommended.
thealistra 4y ago
Those negative examples don't work for me on Safari, I can't drag the frame small enough to trigger the bad examples - it seems not to allow it. So tbh the content looks good for me in both bad and defensive cases
simonw 4y ago
Suggestion for the breadcrumb example on this page (and other examples like it): https://defensivecss.dev/tip/flexbox-wrapping/#breadcrumbs https://defensivecss.dev/tip/flexbox-wrapping/#breadcrumbs Show the HTML and CSS for the example in plain text below the example - saves me from firing up the browser inspector tools, which aren't available if I'm browsing on my phone.
Cloudef 4y ago
As someone who is not very good at UX / frontend, and especially CSS, these kind of tips are very good.
bob1029 4y ago
Wow this is great. I could have really used some of these examples a few days ago. CSS grid combined with media queries feels like cheating to me. Am I missing something big here, or is this all safe to use in 2022?
- numlock86 4y ago
  Media queries have been safe for over a decade. If you feel uneasy with grids and/or still want to support ancient Internet Explorer versions just use flexbox instead.
- pseudosavant 4y ago
  CSS Grid is that amazing. I hadn't looked into it much for a while because I had already adopted flexbox, but grid is so much better for most scenarios I encounter. CSS Grid + CSS Variables really take CSS to another level.
- open-source-ux 4y ago
  "Am I missing something big here, or is this all safe to use in 2022?" CSS Grid has been safe for use for a few years now (if you're supporting modern browsers). https://caniuse.com/mdn-css_properties_display_grid https://caniuse.com/mdn-css_properties_display_grid The problem is that popular frameworks like Bootstrap and Bulma still don't support CSS Grid (they use flexbox only for layout). It's ironic that developers have rightly complained how cumbersome CSS layout has been in the past. Now we have CSS Grid - and yet developers still aren't using it.
  - dgb23 4y ago
    I think the "issue" is that CSS grid is already powerful and expressive enough so that you don't really need something like Bootstrap/Bulma to get in the way. They would simply rename stuff and be a useless middleman. I don't think even utility/functional CSS frameworks like Tailwind do much with CSS grid (not sure). It's that good.
    - bob1029 4y ago
partiallypro 4y ago
Most of these are pure common sense if you are apt with CSS. However, one problem mentioned here is vendor prefix grouping. I've never experienced this problem or seen a grouped prefix ignored by any browser. Autoprefixer doesn't even ungroup prefix rules. I even ran a grouped prefix through W3C validator and came away validated, though the article mentions it's not W3C compliant.
- have_faith 4y ago
  Input placeholder vendor prefixes had to be ungrouped last time I checked. Wouldn’t work when together is a couple browsers but I forget which.
- easrng 4y ago
  I ran in to this with ::-webkit-progress-bar and ::-webkit-progress-value. Also it turns out you can't animate them, so I had to put the animation on the progress element and manually inherit it on the tree of psuedoelements to get the animation I wanted working.
- iamben 4y ago
  > Most of these are pure common sense if you are apt with CSS. I see SO many designers/devs that absolutely do not think of these things. The minute the design is being used 'for real' it becomes messy real quick.
pseudosavant 4y ago
I figured I would share this CSS variable technique I learned here. Tying DOM events into becoming CSS variables can be very powerful. https://dom-event-to-css-variable.glitch.me/ https://dom-event-to-css-variable.glitch.me/ https://github.com/pseudosavant/dom-event-to-css-variable.js https://github.com/pseudosavant/dom-event-to-css-variable.js
jakearmitage 4y ago
I constantly struggle with CSS grids when compared to, say, just using Bootstrap. I know Bootstrap comes with a lot of baggage, but the syntactic sugar is just so useful.
- chiefalchemist 4y ago
  I mentioned this above. But in case you don't see it. https://cssgrid.io/ https://cssgrid.io/
  - jakearmitage 4y ago
    Thank you, that was really helpful.
remi 4y ago
Reminds me of the classic CSS book (2005?) by Dan Cederholm: https://www.amazon.com/Bulletproof-Web-Design-flexibility-protecting/dp/0321808355/ https://www.amazon.com/Bulletproof-Web-Design-flexibility-pr...
spoils19 4y ago
It's crazy that there's so much extra cruft when it comes to crafting web interfaces when a CLI is most often the most powerful and easiest way to get a job done. Am I just taking crazy pills?
- jakearmitage 4y ago
  The real crazy thing is that Delphi/VB got UIs right in the 90s and the JS folks keep reinventing everything.
  - asciiresort 4y ago
    What are examples of successful Delphi/VB UIs?
  - drath 4y ago
    Did it, though? I don't think I've used a Delphi/VB-based application like... ever? I've made some myself back in the day and fiddled around with my friend's university assigments, but I can't think of any real world application using it. Maybe you have some examples?
  - danielheath 4y ago
    I loved that era and it was great, but it didn’t handle resizing to fit different screen sizes well at all. I’m still holding out for a similar interface builder that can handle responsive design.
    - mixmastamyk 4y ago
      Layout managers handle window resizing, which heavily overlap. Started using them in the 90s.
  - yrgulation 4y ago
    You know there may be a market out there for no code ui editors. At least for admin like uis. One that gets it right.
- 4y ago
distantsounds 4y ago
CSS3 got approved in 2006 and now we are at the point where we have to treat the language like it's fighting against us. Quality work the consortium has done in the past 15 years, eh?
- eurasiantiger 4y ago
  That’s not what the site is about at all. It’s ”defensive” in the same sense as ”defensive programming”: handling possible future / edge cases gracefully.
  - distantsounds 4y ago
    the fact you can set a CSS version in your code, and have it not act as it did when that version was originally standardized, is exactly what being "defensive" is about. the code you wrote years ago doesn't work anymore because the browsers have decided to do things differently now. and yet I can run applications from 30 years ago and it will still function as it once did. no hacks or code changes required. you shouldn't have to "future proof" source code against an outside entity just coming in and breaking it all. especially when it's supposed to be an open standard.
    - rimliu 4y ago
      Windows is full of hacks to allow that "I can run applications from 30 years ago" to happen.
    - squidbeak 4y ago
      I'm curious which css code from years ago won't work any more. Care to elaborate?
      - noisymemories 4y ago
        Not OP, but flexbox went very famously trough a few breaking changes throughout its early history: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexibl... There were also some more subtle behavior changes a few years ago in the way webkit handled unprefixed flex-direction centering properties (align-items, justify-content) together with min-width/min-height attributes, switching from behaving closer to IE11 in this regard to basically emulating Blink. AFAIK neither behavior was really against-spec. And if you really want to go all-in with some really deep philosophical questions, I can suggest you the following: Is it possible to center text in a select box? https://stackoverflow.com/questions/10813528/is-it-possible-to-center-text-in-select-box https://stackoverflow.com/questions/10813528/is-it-possible-...
Dan42 4y ago
Ok, the first thing I looked at is "long content" https://defensivecss.dev/tip/long-content/ https://defensivecss.dev/tip/long-content/ and here they recommend to just clip it. Because who cares about content right? Who cares if the partial content you display is useless, as long as it looks good. And that's the kind of tip everyone here is applauding. I would like to say webdesign is in a sorry state nowawadays, except it was also that way 20 years ago. Maybe this "who cares about the content" attitude is inherent to web designers? Sorry if I sound blasé or cynical, but one gets tired after long enough of this.
- dgb23 4y ago
  For me the 'more' button doesn't work properly so that's a bummer. But breaking designs with too much text can really lower the perceived quality and the readability and navigation. Often you would use a technique like that to preserve a 2d aligned grid/table/cell/matrix/cards like design, where the overall structure is really more about seeing things in context and in relation to each other. Having uniform spacing really helps there. If you break the 2d alignment the overall structure becomes wiggly and distracting.
- deleted 4y ago
  [deleted]
- wnevets 4y ago
  What a odd one to single out and complain about it.
  - chrismorgan 4y ago
    Seems very reasonable to me. The advice is very dubious, but presented as absolute truth with no nuance. That’s bad, and, applying it more generally, if there’s one thing from the first row of tips that’s bad, it’s unlikely to be the only one. This sort of thing reduces confidence. I can also say from looking through a number of others that they often lack nuance, and present a solution to a possible problem, without contemplating why that problem arose, and whether the solution is actually the right solution. (e.g. image distortion and background repeat are both a bit weird when you think about them, and the solutions offered are blunt and often not very good with no suggestion on how they could be improved. And flexbox wrapping basically assumes that horizontal scrolling is bad and needs to be fixed, which it isn’t always, but somehow also misattributes the scrolling in the diagram, making it seem as though it’s the flex container that’s scrolling, when in fact it’s just overflowing and causing its parent scroll area, probably the document scroll area, to have a scrollbar, and that is more likely to be problematic if not managed deliberately; but it also completely neglects to mention the more likely problem with flex overflow, which is your items not triggering overflow, but instead being squished narrower than intended, and that is the thing that would actually be worth while describing the solution for—flex-basis and flex-shrink.)
Bolkan 4y ago
A good offence is the best defence, which is why I prefer offensive CSS.
- dgb23 4y ago
  That's a very !important statement right there.
  - michaelcampbell 4y ago
    Paraphrasing Ian Gillian from Deep Purple about stage monitor volume, "Make everything more !important than everything else."
Waterluvian 4y ago
This page needs one sentence at the top that explains what Defensive CSS is. “Future proof interfaces” is far too vague (or maybe I’m not smart!) I went to the “Introduction To” article but it began reading like a cooking recipe story. The page is otherwise very elegant.
correct-me-plz 4y ago
Hilariously they haven't always applied the defences they're promoting - in the "Scroll chaining" example the page will scroll if you over-scroll the example

377 points by jacobr 4y ago

Some really nice tips here.

Previous discussion: https://news.ycombinator.com/item?id=29504784 https://news.ycombinator.com/item?id=29504784 Not the same exact link but same author. Looks like he turned his post into a full-blown site.

BiosElement 4y ago

Really love the togglable examples. It's often hard to imagine how a change look and while in a perfect world I'd have time to make a mockup to test each version, well, it's hardly a perfect world so examples are appreciated!

8n4vidtmkvmk 4y ago
the examples are certainly nice but it only takes a second to resize your browser when testing your own site
- account42 4y ago
  You don't even need to resize the whole browser window - you can use the responsive design mode of your browser's development tools to resize just the viewport of the website you are working on. And it can even emulate touch interfaces to test the relevant media queries. And resizing the window is also something native application developers should embrace. Always roll my eyes when some game developer says they can only target 16:9 because they don't have other monitors - just make your window mode resizable and drag the corner.

thex10 4y ago

I will trust any CSS content from Ahmad Shadeed, I am continually impressed and I've been developing CSS my whole career.

earthboundkid 4y ago
Seconded.
dgb23 4y ago
Agreed. It's one of the few CSS related blogs I'm subscribed to via RSS.
victor106 4y ago
His book Debugging CSS is highly recommended.

thealistra 4y ago

Those negative examples don't work for me on Safari, I can't drag the frame small enough to trigger the bad examples - it seems not to allow it. So tbh the content looks good for me in both bad and defensive cases

simonw 4y ago

Suggestion for the breadcrumb example on this page (and other examples like it): https://defensivecss.dev/tip/flexbox-wrapping/#breadcrumbs https://defensivecss.dev/tip/flexbox-wrapping/#breadcrumbs Show the HTML and CSS for the example in plain text below the example - saves me from firing up the browser inspector tools, which aren't available if I'm browsing on my phone.

Cloudef 4y ago

As someone who is not very good at UX / frontend, and especially CSS, these kind of tips are very good.

bob1029 4y ago

Wow this is great. I could have really used some of these examples a few days ago. CSS grid combined with media queries feels like cheating to me. Am I missing something big here, or is this all safe to use in 2022?

numlock86 4y ago
Media queries have been safe for over a decade. If you feel uneasy with grids and/or still want to support ancient Internet Explorer versions just use flexbox instead.
pseudosavant 4y ago
CSS Grid is that amazing. I hadn't looked into it much for a while because I had already adopted flexbox, but grid is so much better for most scenarios I encounter. CSS Grid + CSS Variables really take CSS to another level.
open-source-ux 4y ago
"Am I missing something big here, or is this all safe to use in 2022?" CSS Grid has been safe for use for a few years now (if you're supporting modern browsers). https://caniuse.com/mdn-css_properties_display_grid https://caniuse.com/mdn-css_properties_display_grid The problem is that popular frameworks like Bootstrap and Bulma still don't support CSS Grid (they use flexbox only for layout). It's ironic that developers have rightly complained how cumbersome CSS layout has been in the past. Now we have CSS Grid - and yet developers still aren't using it.
- dgb23 4y ago
  I think the "issue" is that CSS grid is already powerful and expressive enough so that you don't really need something like Bootstrap/Bulma to get in the way. They would simply rename stuff and be a useless middleman. I don't think even utility/functional CSS frameworks like Tailwind do much with CSS grid (not sure). It's that good.
  - bob1029 4y ago

partiallypro 4y ago

Most of these are pure common sense if you are apt with CSS. However, one problem mentioned here is vendor prefix grouping. I've never experienced this problem or seen a grouped prefix ignored by any browser. Autoprefixer doesn't even ungroup prefix rules. I even ran a grouped prefix through W3C validator and came away validated, though the article mentions it's not W3C compliant.

have_faith 4y ago
Input placeholder vendor prefixes had to be ungrouped last time I checked. Wouldn’t work when together is a couple browsers but I forget which.
easrng 4y ago
I ran in to this with ::-webkit-progress-bar and ::-webkit-progress-value. Also it turns out you can't animate them, so I had to put the animation on the progress element and manually inherit it on the tree of psuedoelements to get the animation I wanted working.
iamben 4y ago
> Most of these are pure common sense if you are apt with CSS. I see SO many designers/devs that absolutely do not think of these things. The minute the design is being used 'for real' it becomes messy real quick.

pseudosavant 4y ago

I figured I would share this CSS variable technique I learned here. Tying DOM events into becoming CSS variables can be very powerful. https://dom-event-to-css-variable.glitch.me/ https://dom-event-to-css-variable.glitch.me/ https://github.com/pseudosavant/dom-event-to-css-variable.js https://github.com/pseudosavant/dom-event-to-css-variable.js

jakearmitage 4y ago

I constantly struggle with CSS grids when compared to, say, just using Bootstrap. I know Bootstrap comes with a lot of baggage, but the syntactic sugar is just so useful.

chiefalchemist 4y ago
I mentioned this above. But in case you don't see it. https://cssgrid.io/ https://cssgrid.io/
- jakearmitage 4y ago
  Thank you, that was really helpful.

remi 4y ago

Reminds me of the classic CSS book (2005?) by Dan Cederholm: https://www.amazon.com/Bulletproof-Web-Design-flexibility-protecting/dp/0321808355/ https://www.amazon.com/Bulletproof-Web-Design-flexibility-pr...

spoils19 4y ago

It's crazy that there's so much extra cruft when it comes to crafting web interfaces when a CLI is most often the most powerful and easiest way to get a job done. Am I just taking crazy pills?

jakearmitage 4y ago
The real crazy thing is that Delphi/VB got UIs right in the 90s and the JS folks keep reinventing everything.
- asciiresort 4y ago
  What are examples of successful Delphi/VB UIs?
- drath 4y ago
  Did it, though? I don't think I've used a Delphi/VB-based application like... ever? I've made some myself back in the day and fiddled around with my friend's university assigments, but I can't think of any real world application using it. Maybe you have some examples?
- danielheath 4y ago
  I loved that era and it was great, but it didn’t handle resizing to fit different screen sizes well at all. I’m still holding out for a similar interface builder that can handle responsive design.
  - mixmastamyk 4y ago
    Layout managers handle window resizing, which heavily overlap. Started using them in the 90s.
- yrgulation 4y ago
  You know there may be a market out there for no code ui editors. At least for admin like uis. One that gets it right.
4y ago

distantsounds 4y ago

CSS3 got approved in 2006 and now we are at the point where we have to treat the language like it's fighting against us. Quality work the consortium has done in the past 15 years, eh?

eurasiantiger 4y ago
That’s not what the site is about at all. It’s ”defensive” in the same sense as ”defensive programming”: handling possible future / edge cases gracefully.
- distantsounds 4y ago
  the fact you can set a CSS version in your code, and have it not act as it did when that version was originally standardized, is exactly what being "defensive" is about. the code you wrote years ago doesn't work anymore because the browsers have decided to do things differently now. and yet I can run applications from 30 years ago and it will still function as it once did. no hacks or code changes required. you shouldn't have to "future proof" source code against an outside entity just coming in and breaking it all. especially when it's supposed to be an open standard.
  - rimliu 4y ago
    Windows is full of hacks to allow that "I can run applications from 30 years ago" to happen.
  - squidbeak 4y ago
    I'm curious which css code from years ago won't work any more. Care to elaborate?
    - noisymemories 4y ago
      Not OP, but flexbox went very famously trough a few breaking changes throughout its early history: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexibl... There were also some more subtle behavior changes a few years ago in the way webkit handled unprefixed flex-direction centering properties (align-items, justify-content) together with min-width/min-height attributes, switching from behaving closer to IE11 in this regard to basically emulating Blink. AFAIK neither behavior was really against-spec. And if you really want to go all-in with some really deep philosophical questions, I can suggest you the following: Is it possible to center text in a select box? https://stackoverflow.com/questions/10813528/is-it-possible-to-center-text-in-select-box https://stackoverflow.com/questions/10813528/is-it-possible-...

Dan42 4y ago

Ok, the first thing I looked at is "long content" https://defensivecss.dev/tip/long-content/ https://defensivecss.dev/tip/long-content/ and here they recommend to just clip it. Because who cares about content right? Who cares if the partial content you display is useless, as long as it looks good. And that's the kind of tip everyone here is applauding. I would like to say webdesign is in a sorry state nowawadays, except it was also that way 20 years ago. Maybe this "who cares about the content" attitude is inherent to web designers? Sorry if I sound blasé or cynical, but one gets tired after long enough of this.

dgb23 4y ago
For me the 'more' button doesn't work properly so that's a bummer. But breaking designs with too much text can really lower the perceived quality and the readability and navigation. Often you would use a technique like that to preserve a 2d aligned grid/table/cell/matrix/cards like design, where the overall structure is really more about seeing things in context and in relation to each other. Having uniform spacing really helps there. If you break the 2d alignment the overall structure becomes wiggly and distracting.
deleted 4y ago
[deleted]
wnevets 4y ago
What a odd one to single out and complain about it.
- chrismorgan 4y ago
  Seems very reasonable to me. The advice is very dubious, but presented as absolute truth with no nuance. That’s bad, and, applying it more generally, if there’s one thing from the first row of tips that’s bad, it’s unlikely to be the only one. This sort of thing reduces confidence. I can also say from looking through a number of others that they often lack nuance, and present a solution to a possible problem, without contemplating why that problem arose, and whether the solution is actually the right solution. (e.g. image distortion and background repeat are both a bit weird when you think about them, and the solutions offered are blunt and often not very good with no suggestion on how they could be improved. And flexbox wrapping basically assumes that horizontal scrolling is bad and needs to be fixed, which it isn’t always, but somehow also misattributes the scrolling in the diagram, making it seem as though it’s the flex container that’s scrolling, when in fact it’s just overflowing and causing its parent scroll area, probably the document scroll area, to have a scrollbar, and that is more likely to be problematic if not managed deliberately; but it also completely neglects to mention the more likely problem with flex overflow, which is your items not triggering overflow, but instead being squished narrower than intended, and that is the thing that would actually be worth while describing the solution for—flex-basis and flex-shrink.)

Bolkan 4y ago

A good offence is the best defence, which is why I prefer offensive CSS.

dgb23 4y ago
That's a very !important statement right there.
- michaelcampbell 4y ago
  Paraphrasing Ian Gillian from Deep Purple about stage monitor volume, "Make everything more !important than everything else."

Waterluvian 4y ago

This page needs one sentence at the top that explains what Defensive CSS is. “Future proof interfaces” is far too vague (or maybe I’m not smart!) I went to the “Introduction To” article but it began reading like a cooking recipe story. The page is otherwise very elegant.

correct-me-plz 4y ago

Hilariously they haven't always applied the defences they're promoting - in the "Scroll chaining" example the page will scroll if you over-scroll the example