Inautilo#Development #Techniques
CSS contrast-color() beyond black & white · How to unlock more colorful theming options https://ilo.im/16bdci
_____
#ModernCSS #Theming #ColorPalettes #Colors #Contrast #Accessibility #Browsers #WebDev #Frontend #CSS
#Development #Overviews
Automated accessible text with CSS · contrast-color() is available soon in all major browsers https://ilo.im/16bcgt
_____
#ModernCSS #Baseline #Color #ColorPalettes #Contrast #Accessibility #Browsers #WebDev #Frontend #CSS
#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 #Techniques
Building dynamic toggletips · A prime example for anchored container queries https://ilo.im/16bc8d
_____
#ModernCSS #AnchorPositioning #ContainerQueries #Toggletips #Popover #ProgressiveEnhancement #WebDev #Frontend #CSS
Building dynamic toggletips using anchored container queries
Anchored container queries are only available in Chrome 143 upwards right now, but here’s Daniel Schwarz to show you how to use progressive enhancement to build up to using that new capability in the context of position-aware toggle tips.
#Development #Guides
Beyond CSS ‘border-radius’ · What the new ‘corner-shape’ delivers to everyday UIs https://ilo.im/16bc4i
_____
#ModernCSS #Cards #Buttons #Batches #Tags #ProgressiveEnhancement #Browsers #WebDev #Frontend #CSS
Beyond border-radius: What The CSS corner-shape Property Unlocks For Everyday UI — Smashing Magazine
For years, developers have been hacking around the limitations of `border-radius`, using clip-path, SVG masks, and fragile workarounds just to get anything other than round corners. The new `corner-shape` property finally changes that, opening the door to beveled, scooped, and squircle corners.
#Development #Launches
Introducing CSS ‘view-transitions-mock’ · A non-visual polyfill for same-document view transitions https://ilo.im/16bak0
_____
#ModernCSS #ViewTransitions #Polyfill #APIs #Browsers #WebDev #Frontend #CSS #JavaScript
Introducing view-transitions-mock: A non-visual Polyfill for Same-Document View Transitions
View Transitions are a powerful Modern Web feature allow for smooth seamless animated transitions two between different states of a web page. They can make for a much more pleasant user experience, but as with any new web platform feature, browser support is not yet fully universal so you need to add some fallback logic to your code.view-transitions-mock bridges that gap by polyfilling the full JavaScript API surface of Same-Document View Transitions, without the animation bits.
#Development #Launches
Mad CSS · A battle of 16 CSS virtuosos from around the world https://ilo.im/16acwb
_____
#ModernCSS #CSS #Tournament #Competition #Games #Players #Skills #WebDev #Frontend
#Development #Launches
Modern CSS Code Snippets · Old habits rewritten for the modern web https://ilo.im/16ao2f
_____
#Collections #ModernCSS #Baseline #Browsers #WebDev #Frontend #CSS
#Development #Introductions
Native random values in CSS · A first look at the upcoming capabilities https://ilo.im/16ayh1
_____
#ModernCSS #Randomness #Functions #Safari #Browsers #WebDev #Frontend #CSS
#Development #Comparisons
Embrace the chaos · The shape and flow of masonry layouts https://ilo.im/16av8m
_____
#ModernCSS #Layouts #Masonry #CssGrid #CssFlexbox #Design #WebDesign #WebDev #Frontend #CSS
Patrick - Embrace the chaos — The shape and flow of masonry layouts
Ramblings about the layout shape and item flow in masonry, and how that compares to other types of CSS layouts. Masonry is a pretty unique layout type, one where embracing the chaos of the layout can be the best approach.