Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Defensive CSS

defensivecss.dev

Post reply on HN
Print view View original

31–40 of 73 posts

Re: Defensive CSS

#31

Post by easrng »

partiallypro wrote: post #11

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.

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.

Re: Defensive CSS

#32

Post by [deleted] »

Dan42 wrote: post #26

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. Mayb…

[deleted]

Re: Defensive CSS

#33

Post by dgb23 »

open-source-ux wrote: post #18
bob1029 wrote: post #10

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?

" 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 layo…

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.

Re: Defensive CSS

#35

Post by danogentili »

FinalBriefing wrote: post #23
spoils19 wrote: post #19

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?

How do you write a CLI tool for viewing a photo album? Would Netflex be better suited as a CLI-only interface?

imv *jpg :)

Re: Defensive CSS

#36

Post by Waterluvian »

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.

Re: Defensive CSS

#37

Post by wnevets »

Dan42 wrote: post #26

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. Mayb…

What a odd one to single out and complain about it.

Re: Defensive CSS

#38

Post by webstrand »

Dan42 wrote: post #26

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. Mayb…

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.

Re: Defensive CSS

#39

Post by iamben »

partiallypro wrote: post #11

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.

> 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.

Re: Defensive CSS

#40

Post by rmbyrro »

webstrand wrote: post #38
Dan42 wrote: post #26

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. Mayb…

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 len…

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.

Post reply on HN