Lmst

BTW, the CSS is heavily commented. And I've changed the images to something a bit more fitting for this time of year.

https://codepen.io/thebabydino/details/WbrjrZM

And now you can tell what gave me the idea for yesterday's challenge https://mastodon.social/@anatudor/115337483292849914

#CSS #Maths #layout #cssLayout #cssGrid #trigonometry #code #coding #frontend #transform #cssTransform #cssClipPath #clipping #clipPath #containerQueries #containerQuery #webDevelopment #web #dev #webDev

Screenshot from my CodePen demo showing the heavily commented CSS and the visual result using Halloween-related images.

Because this got asked on reddit https://www.reddit.com/r/css/comments/1o069yi/comment/ni8evf4/

Made a demo with various options for angled grid columns. Uses mathematical computations to ensure all fits just right all the time, regardless of viewport or number of columns.

On @codepen https://codepen.io/thebabydino/pen/WbrjrZM

Enjoy!

#CSS #Maths #layout #cssLayout #cssGrid #trigonometry #code #coding #frontend #transform #cssTransform #cssClipPath #clipping #clipPath #containerQueries #containerQuery #webDevelopment #web #dev #webDev

#Development #Techniques
Custom properties in media queries? · A workaround powered by modern CSS https://ilo.im/1675st

_____
#ModernCSS #MediaQueries #ContainerQueries #StyleQueries #CustomProperties #Browser #WebDev #Frontend #CSS

https://css-tricks.com/setting-line-length-in-css-and-fitting-text-to-a-container/

Je vois trop de sites qui laissent les paragraphes s’étirer façon spaghetti. Fix: max-width: 65ch, puis clamp() pour une taille qui bouge juste ce qu’il faut.
Bonus nerd : unités de conteneur pour un rendu propre, composant par composant.
https://chierchia.fr/2025/09/setting-line-length-in-css-and-fitting-text-to-a-container/
#CSS #A11y #UX #ContainerQueries #WebDev

Dynamic Media/Container Queries Using “if()”, by @css:

https://css-tip.com/dynamic-queries/

#css #conditionals #mediaqueries #containerqueries

Unconditional Love for Conditional CSS, by @geoff:

https://geoffgraham.me/unconditional-love-for-conditional-css/

#css #functions #conditionals #mixins #containerqueries #transitions

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

Screenshot of a basic test for ranges n style queries.

#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/

Violet text with orange shadow ("Container Queries Unleashed") on duotone orange white image of Vanity Sounds the Horn and Ignorance Unleashes the Hounds Overconfidence, Rashness and Desire (from The Hunt of the Frail Stag)

#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