Inautilo#Development #Launches
View Transitions Toolkit · Ready-to-use utility functions to simplify View Transitions https://ilo.im/16bvzm
_____
#ViewTransitions #Animations #Playback #FeatureDetection #Shim #Browsers #WebDev #Frontend #CSS #JavaScript
#Development #Techniques
CSS ‘position: sticky’ per axis · Get ready for sticky headers and columns in data tables https://ilo.im/16bshn
_____
#CSS #Scrolling #Headers #DataTables #FeatureDetection #ProgressiveEnhancement #Chrome #Browser #WebDev #Frontend
CSS position: sticky now sticks to the nearest scroller on a per axis basis!
If you’ve ever tried to build a data table with a sticky header and a sticky first column, you know the pain. You’d think a simple position: sticky with top: 0 and left: 0 would be enough, but the reality was that only one of both would stick. A recent change to CSS fixes this: position: sticky now plays nice with single-axis scrollers, allowing you to have sticky elements that track different scroll containers on different axes. This change is available in Chrome 148 with the experimental web platform features flag flipped.
#Development #Overviews
Detect at-rule() support in CSS · A handy feature lands in Chromium 148 https://ilo.im/16bf5x
_____
#ModernCSS #W3C #Specification #FeatureDetection #Chrome #Browsers #WebDev #Frontend #CSS
Detect at-rule support in CSS with @supports at-rule(@keyword)
Back in January 2022, I wrote about an exciting new CSS Working Group decision: a function to detect at-rule support using @supports at-rule(@keyword). Fast forward to today, and the CSS Conditional Rules Module Level 5 specification has solidified how this feature works and Chromium (Chrome, Edge, etc.) is about to ship it in Chromium 148!
#Development #Introductions
Introducing the HTML ‘geolocation’ element · What it does and how to use it https://ilo.im/169tah
_____
#HTML #Geolocation #FeatureDetection #Polyfill #ProgressiveEnhancement #Chrome #Browser #WebDev #Frontend #Releases
Frontend DogmaA Progressive Enhancement Challenge, by @chriscoyier (@frontendmasters.com):
https://frontendmasters.com/blog/a-progressive-enhancement-challenge/
#progressiveenhancement #javascript #html #featuredetection #support
#Development #Overviews
Think you know media queries? · “Get ahead of the curve and start putting them to use.” https://ilo.im/1679ci
_____
#MediaQueries #FeatureDetection #Devices #Browser #Accessibility #WebDev #Frontend #CSS #CssNesting
First Look at the Modern “attr()”, by @shadeed9:
#Development #Releases
More options for styling HTML ‘details’ · All the changes introduced in Chrome 131 https://ilo.im/160qk2
_____
#Widget #Disclosure #Accordion #HTML #Chrome #Browser #FeatureDetection #WebDev #Frontend #CSS
#Development #Techniques
The undeniable utility of CSS :has · “The CSS :has selector is incredibly powerful.” https://ilo.im/1601qb
_____
#FeatureDetection #EventListener #DarkMode #Framework #Browser #WebDev #Frontend #CSS #CSSinJS #JavaScript
The Undeniable Utility Of CSS :has • Josh W. Comeau
Of all the latest and greatest CSS features, the “:has” pseudo-class wasn’t exactly at the top of my wishlist. Once I started using it, however, I kept discovering incredible things I could do with it. It’s now become a core part of my toolkit! In this blog post, I'll show you some practical real-world problems I solved using “:has”, as well as some wild experiments that blew my mind!
#Development #Techniques
Captured custom properties · A noteworthy naming pattern for CSS variables https://ilo.im/15zz5d
_____
#CustomProperty #Naming #FeatureDetection #TypeLimitation #ContainerQuery #StyleQuery #WebDev #Frontend #CSS
Captured Custom Properties
In a few of my latest CSS experiments and articles, I used one naming pattern for registered custom properties that I think worth highlighting in a separate blog post. This pattern allows us to create a set of generic custom properties, covering a wide set of use cases for computing and storing their values.