[HN Gopher] Defensive CSS
___________________________________________________________________
Defensive CSS
Author : jacobr
Score : 233 points
Date : 2022-07-05 06:18 UTC (1 days ago)
(HTM) web link (defensivecss.dev)
(TXT) w3m dump (defensivecss.dev)
| thex10 wrote:
| I will trust any CSS content from Ahmad Shadeed, I am continually
| impressed and I've been developing CSS my whole career.
| dgb23 wrote:
| Agreed. It's one of the few CSS related blogs I'm subscribed to
| via RSS.
| earthboundkid wrote:
| Seconded.
| Dan42 wrote:
| Ok, the first thing I looked at is "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 blase or cynical, but one gets tired
| after long enough of this.
| jeffxtreme wrote:
| IMHO, I like the original better than the after too.
|
| However, I did think this was a handy feature to point out,
| just probably not the best example.
| wnevets wrote:
| What a odd one to single out and complain about it.
| webstrand wrote:
| But that's only one of the tips, the rest of the tips are about
| adapting to arbitrary screen size and content without visually
| breaking?
|
| Sometimes you just have to clip user-generated content, though,
| because you can't tell the user to "make sure the label
| succinct enough to fit in this menu." The user will do as they
| please, and the layout must adapt or break. What alternative is
| there?
|
| Sure, you could limit the length of the user-generated label
| ahead of time. But that'll only work for one combination of
| font-face and root font-size. The user-agent can override the
| font-face and the root font-size, potentially causing your
| layout to break. So, once again, you're left with two options:
| clip the text, or let your layout break (text wrapping where it
| shouldn't, overflowing text, etc). At least with `text-
| overflow: ellipsis` if the user-generated label _doesn't_
| overflow, it doesn't get clipped.
| rmbyrro wrote:
| Clipping shouldn't be done at the design level.
|
| This is an application logic concern.
|
| If the application did not impose a character limit, or
| imposed a large one, the design must accommodate this
| freedom.
| webstrand wrote:
| But what about user-agents that override font-face and
| font-size? Those are important accessibility features for
| people with poor vision or dyslexia.
|
| Without knowing the rendered width of the text string, you
| can't limit the text ahead of time. Or are you saying that
| all designs that can't accommodate text-wrapping should be
| avoided?
| dgb23 wrote:
| 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.
| hinkley wrote:
| I used to say there are two kinds of UI designers: the ones who
| care about the interface, and the ones who care about the user.
|
| Then we renamed it UX, trying to make both words about the
| user, and while I have spent less time navigating the post-
| rename world than I did the pre-rename world, my understanding
| of both human nature and the tech news cycle tells me that
| basically nothing changed.
|
| Just like calling it Software Engineering didn't stop people
| from YOLOing spaghetti code and gambling on musical chairs or
| an air of obliviousness to get them out of the blast radius.
| [deleted]
| Bolkan wrote:
| A good offence is the best defence, which is why I prefer
| offensive CSS.
| dgb23 wrote:
| That's a very !important statement right there.
| BiosElement wrote:
| 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!
| thealistra wrote:
| 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
| Waterluvian wrote:
| 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.
| pseudosavant wrote:
| 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://github.com/pseudosavant/dom-event-to-css-variable.js
| flanbiscuit wrote:
| Previous discussion:
| 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.
| bob1029 wrote:
| 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 wrote:
| 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 wrote:
| 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.
| chiefalchemist wrote:
| This is worth the price ;)
|
| Aside from the Grid-centric lessons, the Grid v Flexbox is
| worth watching more than once.
|
| https://cssgrid.io/
| open-source-ux wrote:
| " _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
|
| 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 wrote:
| 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.
| remi wrote:
| Reminds me of the classic CSS book (2005?) by Dan Cederholm:
| https://www.amazon.com/Bulletproof-Web-Design-flexibility-pr...
| partiallypro wrote:
| 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 wrote:
| 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.
| iamben wrote:
| > 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.
| easrng wrote:
| 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.
| Cloudef wrote:
| As someone who is not very good at UX / frontend, and especially
| CSS, these kind of tips are very good.
| simonw wrote:
| Suggestion for the breadcrumb example on this page (and other
| examples like it): 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.
| mrcartmeneses wrote:
| Some really nice tips here.
| spoils19 wrote:
| 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 wrote:
| The real crazy thing is that Delphi/VB got UIs right in the 90s
| and the JS folks keep reinventing everything.
| asciiresort wrote:
| What are examples of successful Delphi/VB UIs?
| drath wrote:
| 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?
| FinalBriefing wrote:
| How do you write a CLI tool for viewing a photo album? Would
| Netflex be better suited as a CLI-only interface?
| danogentili wrote:
| imv *jpg :)
| madeofpalk wrote:
| Did you post this from a CLI?
| lordnacho wrote:
| jakearmitage wrote:
| 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 wrote:
| I mentioned this above. But in case you don't see it.
|
| https://cssgrid.io/
| distantsounds wrote:
| 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 wrote:
| 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 wrote:
| 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.
___________________________________________________________________
(page generated 2022-07-06 23:00 UTC)