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

51–60 of 73 posts

Re: Defensive CSS

#51

Post by webstrand »

danielheath wrote: post #48
webstrand wrote: post #43

Earlier quoted context omitted.

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?

If the user has large text because they can’t read easily, how is clipping it short going to help them read it?

Usually when the layout breaks, functionality is lost: buttons can't be clicked on, text can't be read, content is obscured to the right, etc. If none of these things are happening, I'd agree not clipping is fine.

Re: Defensive CSS

#52

Post by yrgulation »

jakearmitage wrote: post #22
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?

The real crazy thing is that Delphi/VB got UIs right in the 90s and the JS folks keep reinventing everything.

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.

Re: Defensive CSS

#53

Post by squidbeak »

distantsounds wrote: post #28
eurasiantiger wrote: post #21

Earlier quoted context omitted.

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.

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

I'm curious which css code from years ago won't work any more. Care to elaborate?

Re: Defensive CSS

#54

Post by 40four »

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?

You’re not talking crazy pills, but the article is about CSS. That’s like saying, “I don’t understand why we have websites at all.” A very small subset of people know how to use a CLI. We’re talking about building visual interfaces for common consumption. Not tools only developers understand how to use :)

Re: Defensive CSS

#55

Post by ysavir »

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…

Not a designer, but here's my take:

Clipping is a good approach to maintaining the interface widget. However, the content still needs to be exposed somehow, such as with a tooltip on hover. Similar to how all "3 days ago" "dates" should show the actual date/time when hovered.

The default interface should be clean and easy, not cluttered, with a more detailed level available on request.

Re: Defensive CSS

#56

Post by tshaddox »

rmbyrro wrote: post #40
webstrand wrote: post #38

Earlier quoted context omitted.

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.

It doesn’t strike me as a problem in a simple list widget as shown in the article. Presumably you can click on the list item to see the person’s full name. That’s just an example of “click or scroll here to see more of this content” which is literally an unavoidable design pattern on any given display.

Re: Defensive CSS

#57

Post by bob1029 »

dgb23 wrote: post #33
open-source-ux wrote: post #18

Earlier quoted context omitted.

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

This is my experience so far. Once I felt the total control over layouts at any size, I had zero fears about losing all the other benefits you get with css frameworks. I can figure out svg icons, modals, etc on my own. The #1 reason I used bootstrap up until now is to deal with complex layouts and breakpoints. Flexbox handles most other cases without much drama too.

I am currently running a 100% vanilla JS+CSS stack for a responsive web app. I have never felt this much power before. Everything is so immediate and obvious now.

Re: Defensive CSS

#59

Post by miiiiiike »

rmbyrro wrote: post #40
webstrand wrote: post #38

Earlier quoted context omitted.

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.

This is the kind of stuff that gets boiled out of your blood after one day of practical front-end dev work.. Either that or you dedicate the rest of your life to creating a framework to ensure that your, infrequently updated and even less frequently visited, blog to aligns to a vertical grid.

Re: Defensive CSS

#60

Post by 8n4vidtmkvmk »

BiosElement wrote: post #4

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!

the examples are certainly nice but it only takes a second to resize your browser when testing your own site
Post reply on HN