Mastodawn

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

Nebraska.Code 2025 hosted on Whova

July 23 – 25, 2025, Lincoln, NE

Frontend Dogma May 14

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

Container Query for “is there enough space outside this element?” – Frontend Masters Blog

A container query can contain viewport units, meaning you can compare the window vs the element and make choices.

Frontend Dogma May 7

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

Using Container Query Units Relative to an Outer Container – Frontend Masters Blog

Container units (e.g. cqi) are only able to reference the closest container. But if you register a custom property and set that higher up, you can get your hands on other containers units.

Ana Tudor 🐯Feb 22

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

Inautilo Jan 28

#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 • Josh W. Comeau

Container queries expand the universe of designs that can be implemented, giving us whole new superpowers. Now that container queries are broadly available, I think it’s time we start exploring this potential! In this post, I’ll share the “killer pattern” I can’t stop using in my work, and explore what’s possible with this new capability.

pablolarah Jan 27

🟠🟣 Container Queries Unleashed
by @joshwcomeau

#css #ContainerQueries #webdev

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

Container Queries Unleashed • Josh W. Comeau

Inautilo Jan 24

#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

Conditional CSS grid template areas / Marijke Luttekes

Use a combination of CSS named grid areas and `display: contents;` for ultimate layout flexibility.

Inautilo Jan 16

#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

Thomas Michael Semmler Dec 19, 2024

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