Alex Riviere presents 'Fresh Hot CSS Features!' July 25th at Nebraska.Code().

https://nebraskacode.amegala.com/

#cssframework #bootstrap #cssgrid #containerqueries #css #css2025 #cssfeatures #softwaredevelopment #TechConference #softwareengineering #DeveloperCommunity #networkingevent #lincolnnebraska #Nebraska #midlands #heartland #SiliconPrairie

Container Query for “Is There Enough Space Outside This Element?”, by @chriscoyier (@frontendmasters.com):

https://frontendmasters.com/blog/container-query-for-is-there-enough-space-outside-this-element/

#css #containerqueries

Using Container Query Units Relative to an Outer Container, by @anatudor (@frontendmasters.com):

https://frontendmasters.com/blog/using-container-query-units-relative-to-an-outer-container/

#css #containerqueries #units

I haven't used style queries much, but just gave them a spin and got an idea (that I've just tested & works) about how we can have ranges in style queries right now. 🥳

That is, red background if --k <= 20, orange background if 20 < --k <= 40 and so on...

#CSS #styleQueries #cssVariables #code #coding #frontend #containerQueries #web #dev #webDev #webDevelopment

#Development #Approaches
CSS container queries unleashed · Where container queries outperform media queries https://ilo.im/1621uq

_____
#Layout #ContainerQueries #GracefulDegradation #ResponsiveDesign #WebDesign #WebDev #Frontend #CSS

🟠🟣 Container Queries Unleashed
by @joshwcomeau

#css #ContainerQueries #webdev

https://www.joshwcomeau.com/css/container-queries-unleashed/

#Development #Techniques
Conditional CSS grid template areas · A magic formula to “open the gates to layout heaven.” https://ilo.im/161t0f

_____
#Layout #CssGrid #CssNesting #ContainerQueries #LogicalProperties #ResponsiveDesign #WebDesign #WebDev #Frontend #CSS

#Development #Releases
CSS scroll-state() · Chrome 133 introduces scroll state container queries https://ilo.im/161umo

_____
#ContainerQueries #Scrolling #ScrollDrivenAnimation #Animation #ProgressiveEnhancement #Chrome #Browser #WebDev #Frontend #CSS

Omg. I attempted to debug an issue in safari, where a position: fixed; element didn't correctly align to the viewports edge and I couldn't find out why, until I noticed that it is now relatively positioned to the next element with `container: inline-size;` on it.

Is this how it is supposed to be? This is only the case in safari

#safari #css #containerqueries #html #webdev

🪲 Solved By Modern CSS: Feature Image
by @shadeed9

Using container queries and CSS :has() to build a feature image.

#css #ContainerQueries #has #FeatureImage #webdev

https://ishadeed.com/article/modern-css-feature-image/

#Development #Techniques
Solved by modern CSS: feature image · Feature image with container queries and :has() https://ilo.im/161bsv

_____
#ModernCSS #Image #ContainerQueries #CssHas #Viewport #Browser #WebDev #Frontend #HTML. #CSS

🧃 Opting in to CSS container queries for a existing design system

by Georgie Cooke
@heygeorgie

#ContainerQueries #css #webdev

https://hey.georgie.nu/container-queries-existing-design-system/

#Development #Techniques
Fluid everything else · “Responsive design should be almost invisible to the user.” https://ilo.im/160rfm

_____
#ModernCSS #Typography #ContainerQueries #CssClamp #CssCalc #FluidDesign #ResponsiveDesign #WebDev #Frontend #CSS

#Development #Guides
A friendly introduction to container queries · The CSS feature everyone asked for but few are using https://ilo.im/160peq

_____
#CSS #ContainerQueries #MediaQueries #ContainmentAPI #Browser #ResponsiveDesign #WebDesign #WebDev #Frontend

📦 A Friendly Introduction to Container Queries

by Josh Comeau @joshwcomeau.com

#ContainerQueries #css #webdev

https://www.joshwcomeau.com/css/container-queries-introduction/

@Jamessw I am 1000%, yes!

Is that from the Level 1 spec text? You wouldn't happen to be privy to any conversations where this is being pushed forward? 👂

I was checking out https://kizu.dev/anchor-positioning-experiments/#the-challenge and thought about this haunted alternative: https://codepen.io/Westbrook/pen/BagPwrN?editors=0100 👻

#CSSSalvation #containerQueries #containerStyleQueries

🔴⭕️CSS Container Queries
by Thoriq Firdaus at Hongkiat
#css #webdev #ContainerQueries

https://www.hongkiat.com/blog/css-container-queries/

🟣 What if you used Container Units for… everything?
by Chris Coyier
@chriscoyier at @FrontendMasters
#css #webdev #ContainerQueries

https://frontendmasters.com/blog/what-if-you-used-container-units-for-everything/

#CSS #containerQueries are a huge gift for #designSystem #components.
They are now available in all major browsers: https://caniuse.com/css-container-queries
@shadeed9 has a fantastic interactive deep dive: https://ishadeed.com/article/css-container-query-guide

It explains the benefits and implementation in great detail.

🔵🟡🔴 How to use container queries now
by Phil Walton
@philwalton at @ChromiumDev
#ContainerQueries #css #webdev

https://web.dev/blog/how-to-use-container-queries-now