221–230 of 234 posts
>The flexbox/grid release, uniquely coordinated across browsers (for once) What browsers? There is only Chromium left...
Some nice surprises in here (love the idea of @scope and @nest). It's a total mind blow how far along CSS has come from the stone age IE6 days.
What's the benefit to:
@scope(.card) {
header {
}
}
.card header {
}
Some nice surprises in here (love the idea of @scope and @nest). It's a total mind blow how far along CSS has come from the stone age IE6 days.
I don't quite get what the big deal is with @scope: What's the benefit to: @scope(.card) { header { } } over .card header { } (or ".card > header", the article isn't quite clear which it is). Is it just the sass-style nesting? How does it differ from @nest then?
Earlier quoted context omitted.
> 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?
The other thing is that no website can ask you to install it like on Android. You have to go to the "share" menu and add to homescreen. Most users don't know about that.
Earlier quoted context omitted.
Safari is so behind in terms of lack of support for free media formats/codecs like webm, webp, and av1. You can't even switch browsers to view them, since it's all webkit
Safari is so behind in terms of lack of support for free media formats/codecs like webm, webp, and av1 Both WebM [1] and WebP [2] have been supported by Safari for nearly two years now. WebKit added support for AVIF (essentially the single-frame version of AV1) back in September [3]; AV1 is expected during the iOS 16/macOS Ventura release cycle. [1]: https://webkit.org/blog/11648/new-webkit-features-in-safari-... [2]…
Which was incredibly late. For example, Firefox had it since v28 [1], which was 8 years ago. Firefox has also supported AV1 for 3 years already. And obviously Chrome supported both for longer
Earlier quoted context omitted.
I don't understand either one. I use React (while technically pure JS, I assume this isn't what you mean) and calculate most of the sizes manually, just passing width and height as props into my elements. People tell me that's dumb, but it's always worked, and I don't have to keep up with this topic of CSS that doesn't really interest me. I've tried the "correct" flexbox way too, and it wasn't easier. One particular…
For img you set one of width/height attributes on the image or the aspect ratio CSS property (for page stability during early loading, actual dimensions are preferred), then max-width: 100%; height: auto to scale according to horizontal space, or max-height:100%; width:auto to scale according to vertical space. The additional complexity of images is that you nearly always want to maintain the aspect ratio, whereas a…
Naturally I first tried making an outer flexbox'd div then putting a {width: 100%, height: 100%} img inside that with whatever fit option. And several variations on that, including the "width: auto" or "width: 0" tricks. Somehow it'd always either go outside the div boundaries or exhibit some other glitchy behavior. On top of that, there's the issue you mentioned where the image isn't loaded yet, causing funky resizing beforehand. You're simply better off with exact pixel dimensions.
There are tons of SO questions from confused individuals in my same situation, all with different answers that only work in certain scenarios. For example https://stackoverflow.com/a/21103679 which only works for auto-resizing the width, not the height. I think your suggestion has a similar caveat.
Earlier quoted context omitted.
I've done this before. The problem is a lot of elements will change to a different (standard?) appearance when you add styles like that, so you'd need to recreate the original look if you wanted to just change the color. Also, each browser has different psuedoelements so you have to support firefox and webkit separately, which is made worse by the fact that webkit doesn't support targeting multiple elements with your…
For what it’s worth, having forms work the same across browsers is something Apple, Google and Mozilla are working on for Interop 2022: https://wpt.fyi/interop-2022
Earlier quoted context omitted.
Safari is so behind in terms of lack of support for free media formats/codecs like webm, webp, and av1 Both WebM [1] and WebP [2] have been supported by Safari for nearly two years now. WebKit added support for AVIF (essentially the single-frame version of AV1) back in September [3]; AV1 is expected during the iOS 16/macOS Ventura release cycle. [1]: https://webkit.org/blog/11648/new-webkit-features-in-safari-... [2]…
> Both WebM [1] and WebP [2] have been supported by Safari for nearly two years now. Which was incredibly late. For example, Firefox had it since v28 [1], which was 8 years ago. Firefox has also supported AV1 for 3 years already. And obviously Chrome supported both for longer [1]: https://caniuse.com/webm [2]: https://caniuse.com/av1
So we’re doing this? Instead of acknowledging your statement was incorrect, now it’s about how supposedly late Apple was in supporting the formats you said they didn’t support.
And no disrespect to Firefox, but them having WebP support 8 years ago (and AV1 support 3 years ago) in the big picture doesn’t matter that much outside of the web developer/HN/geek echo chamber and the single digit percent of market share Firefox represents. Nothing got held up; a properly designed site would fall back to JPEG or PNG if WebP wasn’t supported by a particular browser. Not the end of the world.
But when your device is in a “billion pockets y’all” it matters. That was true a few years ago when Oprah said it; it’s closer to two billion pockets (and desks and backpacks).
It’s pretty common on HN to trash Safari when it doesn't support web standards and then find another way to trash Safari when it does support those standards and then ignore Safari when it ships a feature first and pretend it didn’t happen or doesn’t matter.
A quick list of web features shipped first:
• first browser engine to implement the new color syntax defined in CSS Color Module Level 4
• first browser to support drawing shapes, text, gradients, and shadows with wide gamut CSS colors on Display P3 canvases
• first browser to ship a proposed web standard for measuring advertising in a privacy-preserving way – Private Click Measurement
• the only browser that supports lch() and lab() color functions (and probably the only browser to support these predefined color spaces: a98-rgb, prophoto-rgb, rec2020, xyz)
• first browser to ship large, small and dynamic viewport units
• first browser to ship :has() parent selector (March vs August 2022 and later for Google and Mozilla)
There are more but these are the most current ones after a few minutes of Googling. Depending on the use case, some of these may be critical to some web developers.
I get it—Safari being current and in some cases, ahead with their support of web standards that they, Google/Microsoft and Mozilla have agreed to—I’m discounting the proposals from Google when they ship stuff only they want/care about—doesn’t fit the prevailing HN narrative that “Safari is the new IE” and is holding the web back. Just objectively examining the state of the web back then would show how laughably ahistorical [1] this view is, but that’s where we are.
[1]: ahistorical—lacking historical perspective or context
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…