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

State of CSS

web.dev

Post reply on HN
Print view View original

201–210 of 234 posts

Re: State of CSS

#201

Post by ricardobayes »

dmitriid wrote: post #146
soperj wrote: post #143

Earlier quoted context omitted.

It's so annoying to me that there's one browser that's holding everyone back. They also make it so that no one can use anything but their browser engine on mobile phones so they're harder to ignore.

When it comes to CSS Safari is rarely behind, and often ahead. When it comes to Chrome-only non-standards Safari is right where it needs to be: not implementing this bullshit.

So what about lookbehind regex for example? Every single major browser supports it apart from Safari. https://caniuse.com/js-regexp-lookbehind

Re: State of CSS

#202

Post by dmitriid »

ricardobayes wrote: post #201
dmitriid wrote: post #146

Earlier quoted context omitted.

When it comes to CSS Safari is rarely behind, and often ahead. When it comes to Chrome-only non-standards Safari is right where it needs to be: not implementing this bullshit.

So what about lookbehind regex for example? Every single major browser supports it apart from Safari. https://caniuse.com/js-regexp-lookbehind

Yes, there are a few specs where I wish they were faster in implementing them.

Re: State of CSS

#203

Post by BeFlatXIII »

lioeters wrote: post #191
psygn89 wrote: post #66

:has() basically removes the need for us to use JS to attach classes to parent elements as we can essentially look ahead now, e.g. ".some-component:has(.input-select-all:checked) { background: blue }" whereas we would have to use JS to query the input, then query the parent and attach some css class as a styling hook. Container queries will allow us to fine-tune the not-so-predictable gaps between our predictable bre…

I was curious about current browser compatibility for :has(). The major browsers (Chrome, Edge, Safari, Opera) support it except for Firefox, which has it behind a flag still. ~76% of users are covered. :has() CSS relational pseudo-class - https://caniuse.com/css-has

I wonder when Firefox will turn on that flag (and why it's still off by default). Is their implementation not yet fully-tested?

Re: State of CSS

#204

Post by lioeters »

BeFlatXIII wrote: post #203
lioeters wrote: post #191

Earlier quoted context omitted.

I was curious about current browser compatibility for :has(). The major browsers (Chrome, Edge, Safari, Opera) support it except for Firefox, which has it behind a flag still. ~76% of users are covered. :has() CSS relational pseudo-class - https://caniuse.com/css-has

I wonder when Firefox will turn on that flag (and why it's still off by default). Is their implementation not yet fully-tested?

According to Bugzilla:

- 4 months ago Chromium enabled :has() selector by default

- 3 months ago, CCS Working Group made a small design decision ("resolution") which may affect how Firefox implements it

- 22 days ago: "has() implementation is experimental, that's why it's not enabled anywhere by default."

I think the good news is that it's in active development, and seems fairly close to release.

Bugzilla: Implement the :has() pseudo class - https://bugzilla.mozilla.org/show_bug.cgi?id=418039

Re: State of CSS

#205

Post by mccorrinall »

dmitriid wrote: post #193
hot_gril wrote: post #163

Earlier quoted context omitted.

I mostly agree, but mobile Safari seems intentionally behind on PWAs, and I do blame Apple's obvious conflict of interest with the App Store. Biggest thing is lack of support for notifications, though supposedly that's finally changing after years: https://www.searchenginejournal.com/web-push-coming-to-ios/4...

> mobile Safari seems intentionally behind on PWAs There's no such thing as a PWA. There are a dozen disparate standards, and everyone has their own idea which collection of standards constitutes a PWA. Mobile Safari supports the absolute vast majority of those standards. IIRC the only "major" standard from that bunch that mobile Safari didn't support was push notifications.

The still don’t support web push & notifications on ios and ipados. Even when you enable push api and notifications in experimental settings of safari it just doesn’t work.

Or am I doing something wrong?

Re: State of CSS

#206

Post by Beltalowda »

toastercat wrote: post #2

Great overview. I'm always excited by newer features to CSS that make older JS-only methods obsolete. I've also grown CSS-tooling fatigued after using SASS and PostCSS plugins for years. I've recently gone back to only using vanilla CSS on personal projects and while there are niceties I do miss (nesting) it's refreshing not having to deal with config files or waiting for stuff to compile.

I used CSS tooling like LessCSS and SASS for years before switching back to regular CSS because I too wanted to simplify the build process (i.e. by not having one), and I found I didn't really miss the nesting so much. Mostly I solved it by writing things fairly concisely as:

    #menu     { display: flex; justify-content: space-between; orange; border-bottom: 1px solid red;
                background-color: orange; color: #111; }
    #menu >a  { font-size: 1.2em; margin-right: 1em; border: 1px solid #000; }
etc.

A bit of an unconventional way to write it, but I found it really helps keeping a bit of overview because so much more fits on your screen, and because CSS is fairly simple the extra density doesn't hurt readability all that much IMO.

The biggest thing I missed was variables; but that's been solved now.

Now I just want line comments (// ..). I dislike /* .. */ comments with a passion.

Re: State of CSS

#207

Post by culi »

miiiiiike wrote: post #151
soperj wrote: post #143

Earlier quoted context omitted.

It's so annoying to me that there's one browser that's holding everyone back. They also make it so that no one can use anything but their browser engine on mobile phones so they're harder to ignore.

This is repeated over and over again, but, it’s not true when it comes to Safari’s support for CSS. Now, requiring a Mac to debug JS on mobile Safari.. That’s irritating.

Yup. The post mentioned Interop 2022 which I've been following pretty closely and it's been interesting to see how Chrome has been the one lagging behind usually. Safari has actually taken the lead recently

https://wpt.fyi/interop-2022

Re: State of CSS

#208

Post by The5thElephant »

LordDragonfang wrote: post #104

Am I the only one who looks at the example color gradients and thinks the new ones just look... worse? The sRGB one is the only one that looks perceptually uniform, and is probably the only one I'd feel comfortable putting text on top of, and the bottom two have really aggressive and distracting banding. That makes this especially concerning: >The default color space also changes to LCH instead of sRGB. Since LCH is…

It really depends on what colors you are using in the gradient. In some cases LCH or others looks a lot better than RGB or HSL: https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_8...

Re: State of CSS

#209

Post by The5thElephant »

seydor wrote: post #106

Grid is crap. Html tables were much easier to handle, they should have gone with tags instead (since tables have been declared toxic). The cryptic nature of the grid layout units is something that seems deliberately obnoxious who the f thinks this is readable: grid-template-rows: auto 40px 1fr 80px;

Looks pretty readable to me. 4 explicit columns, the first is width auto, second 40px, third takes up any remaining space, 4th is 80px. How would this be any more readable with tags or table setup? Especially if you want to have additional columns auto-generated by content or numerous other grid abilities that are not easy to setup with tables.

Re: State of CSS

#210

Post by soperj »

trillic wrote: post #186
soperj wrote: post #143

Earlier quoted context omitted.

It's so annoying to me that there's one browser that's holding everyone back. They also make it so that no one can use anything but their browser engine on mobile phones so they're harder to ignore.

Can I get a boo to the Google/Chromium shill? Apple implements the standard quite nicely. They don’t actively implement googles DRM and tracking incentivized, non-standardized extensions. As an independent web developer, I’ll be developing to the standard and actively avoiding non-standard “google extensions” to the web ecosystem.

Ahh yes, I made this account in 2012 just to shill for a company who's products I actively don't use. Scram.
Post reply on HN