bramus

pawelgrzybek, 19 hours ago to random

📝 New post

Top picks — 2024 May

https://pawelgrzybek.com/top-picks-2024-may/

After over 9 years of publishing top picks in an unchanged format, I decided to change it slightly. This edition features work by @stefan @matthiasott @kizu @bramus @deno_land @samwho and others 🫶

walpolea, 13 hours ago to random

It's rare that we get a new one-liner in CSS that is entirely progressive enhancement and has such a huge impact on web browsing UX.

@view-transition { navigation: auto; } is definitely one of them.

If this becomes the new thing browsers do to woo developers, I'm here for it (as long as it's in spec). Opt-in happy-path defaults set a great tone for any API that may be hiding some complexities beneath it.

sachagreif, 1 day ago to random

I just discovered the nth-child(of…) syntax and my mind is blown:

https://developer.chrome.com/docs/css-ui/css-nth-child-of-s

walpolea, 2 days ago to random

I've written up some details on an interesting css trick to allow containers to take on a custom top and bottom shape using composed image-masks and a few clever calculations.

https://www.andrewwalpole.com/blog/custom-top-and-bottom-css-container-masks/

stefan, 3 days ago to random

The new Web Weekly is out! 👇

This time:

✅ VDOM internals
✅ A handy web component base class
🎶 Music for programming
✅ Terminal-based file management
✅ MPA view transitions coming to Chrome 126 🥂
➕As always, new tools and platform updates

https://www.stefanjudis.com/blog/web-weekly-132/

mxbck, 5 days ago to random

✏️ New post: "Old Dogs, new CSS Tricks"

Lots of new features have shipped in the last few years, but real-world usage is still low. What are the things holding us back, and how can we break out of our old habits to learn new ways of writing CSS?

https://mxb.dev/blog/old-dogs-new-css-tricks/

rachelandrew, 5 days ago to CSS

A quick post addressing some questions about masonry and reading order https://rachelandrew.co.uk/archives/2024/05/26/masonry-and-reading-order/ #css

baldur, 10 days ago to random

We really don’t make enough of the fact that you don’t need JS to make a nice website. Just HTML and CSS

And, whatever most programmers say about them, HTML and CSS are absolutely much more accessible to learn than JS ever has been or will be

kizu, 13 days ago to CSS

New post: “Recent CSS Bookmarks 16”

https://blog.kizu.dev/recent-css-bookmarks-016/

Another big batch of #CSS bookmarks: more than a month worth of them.

As usual, with that number of them (32!), I grouped them into eight sections: Colors and Themes, CSS Layouts, Typography, Future CSS, Selectors, Shapes and Effects, Everything Else and My Articles.

owa, 14 days ago to random

Apple essentially demanding that browser vendors relocate their iOS browser development teams to the EU.

The next episode of malicious compliance:
https://www.theregister.com/2024/05/17/apple_browser_eu/

keithjgrant, 14 days ago to random

📝 New post: Weighing in on CSS Masonry

https://keithjgrant.com/posts/2024/05/weighing-in-on-css-masonry/

scottjehl, 15 days ago to random

"The Latest in Web UI" talk at I/O by @Una this week is full of great stuff to have on your radar: scroll-driven animations, view transitions, popover, dialog, anchor positioning, experimental customizable select, exclusive accordions, :has, container queries, etc!
https://www.youtube.com/watch?v=_-6LgEjEyzE

bramus, 15 days ago to random

What's new in view transitions? (Google I/O 2024 update)

In this video I introduce you to cross-document view transitions for MPA along with two improvements that allow you to more easily work with view transitions in general.

https://developer.chrome.com/blog/view-transitions-update-io24

#viewtransitions #googleio

igalia, 23 days ago to random

🎙️ New Episode of Igalia Chats: Stone Cold CSS Masonry

@bkardell and @Meyerweb talk with Google's @rachelandrew about the CSS Grid Level 3 feature we've all been debating, often called Masonry

https://www.igalia.com/chats/masonry

paul, 23 days ago to random

New in Chrome 125 DevTools:

• Error causes shown directly in Console for easier debugging
• CSS selector stats in Performance for optimizing page loads
• Early Hints headers support in Network tab
• Plus the usual array of updates and fixes to help build the future of the web

Lots of helpful improvements for web developers in this release. Check out the article for more details on these updates and how to use them effectively. Happy building!

https://developer.chrome.com/blog/new-in-devtools-125?hl=en

pawelgrzybek, 24 days ago to CSS

@bramus is on fire. Another incredible resource by this fella!

Introducing "Unleash the power of Scroll-Driven Animations"

https://developer.chrome.com/blog/scroll-driven-animations-video-course

#css

pawelgrzybek, 25 days ago to CSS

“If View Transitions and Scroll-Driven Animations had a baby” by @bramus is so good! I am learning tons!

https://youtu.be/a6ZN9jM-1K4

Did you know you can change HTML elements between transitions, for example from h2 to h1?! This is awesome!

#css

bramus, 26 days ago to CSS

📝 Misconceptions about CSS Specificity

To remove some of the confusion, here’s a list of misconceptions about Specificity in CSS …

https://www.bram.us/2024/05/05/misconceptions-about-css-specificity/

#CSS #Specificity

yuanchuan, 26 days ago to random

📝 Time-based CSS Animations
https://yuanchuan.dev/time-based-css-animations

OddBird, 29 days ago to CSS

CSS Anchor Positioning is yet another fantastic new upcoming #CSS feature, but you don't have to wait to use it, @OddBird has a polyfill for that!

https://www.youtube.com/shorts/CAPa_tGHlC8

rachelandrew, 1 month ago to CSS

There's been a lot of discussion about masonry in CSS recently. I wrote about the Chrome team's proposal to help clarify why we have concerns with bundling masonry in with grid, and to show that a separate spec doesn't mean fewer features. https://developer.chrome.com/blog/masonry #css

tunetheweb, 1 month ago to random

Feeling intimidated by the DevTools Performance Panel and INP?

This is a fantastic video from my colleague Brendan Kenny with step by step instructions on dig into responsiveness issues. Guaranteed you'll learn a lot about how to debug these - I did!

https://www.youtube.com/watch?v=cmtfM4emG5k

hi_mayank, 1 month ago to random

popover is really here, huh? https://web.dev/blog/popover-api

almost hard to believe, after the hundreds of thousands of hours we've all collectively spent building hacky javascript-based popovers

zachleat, 1 month ago to random

A huge thank you to @jarhar (of Google) for “driving the design and implementation of Custom Element support” in React v19 (currently in Beta).

Honestly never thought I’d see the day—a huge win for web standards and web components.

https://react.dev/blog/2024/04/25/react-19#support-for-custom-elements