I have a new article out!

Super Simple Full-Bleed & Breakout Styles
https://frontendmasters.com/blog/super-simple-full-bleed-breakout-styles/ - my take on an old problem using modern CSS solutions.

Using a spooky made up Halloween recipe to illustrate concepts.

PS @chriscoyier told me to be proud of it 😛

#CSS #cssLayout #cssGrid #cssVariables #containerQueries #containerQuery #code #web #webDev #webDevelopment #dev #coding #frontend #Halloween

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

#tinyCSStip We can have boolean logic in container queries!

And this works cross-browser!

Live test on @codepen: https://codepen.io/thebabydino/pen/QwbNNpz

More info on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/@container#logical_keywords_in_container_queries

#CSS #cssLayout #containerQuery #coding #web #dev #webDev #webDevelopment #code #frontend

In Safari, does anyone know why the existence of a container definition (`container-name`/`container-type`) in a layout results in media queries not getting executed at all or being delayed by 5 to 10 seconds? Like you resize the window and nothing happens, you can still interact with the site and then suddenly the layout flips?! Experienced this for the first time and am a bit stumped.

#webdesign #css #safari #bug #containerQuery #mediaQuery

Haven't been posting much coding stuff this past week as I've found it difficult to focus on it given the state of things in my country 😞

But... I have a new article out!

Using Container Query Units Relative to an Outer Container https://frontendmasters.com/blog/using-container-query-units-relative-to-an-outer-container/

Sparked by a question @mattwilcox asked here.

#CSS #containerQuery #frontend #coding #web #dev #webDev #webDevelopment #code #containerQueryUnits

Here's a quick responsive clover layout on @codepen https://codepen.io/thebabydino/pen/RNwmjEQ?editors=0100

#CSS #layout #cssLayout #containerQuery #cssGrid #code #coding #responsive #web #dev #webDevelopment #webDev #frontend

#tinyCSStip

Pretty sure I've posted about this before, but a quick search at the morning hours didn't find it, plus I saw someone ask about it yet again¹, so... fixed aspect-ratio box within variable size container!

Live on @codepen https://codepen.io/thebabydino/pen/ogvZdoZ?editors=1101

¹here https://www.reddit.com/r/css/comments/1hhf4x3/comment/m2s81yr/

#CSS #aspectRatio #code #coding #web #frontend #dev #webDevelopment #webDev #containerQuery #containerQueryUnits #container

#tinyCSStip Container queries on the body? Why, when media queries have better support?

Well, container queries make it an IF depending on the width of the body's content-box.

That is, subtracting the scrollbar IF we have one (we can't know).

**Heavily** commented @codepen demo https://codepen.io/thebabydino/pen/ZEgjpYL

#CSS #container #containerQuery #layout #cssLayout #grid #cssGrid #frontend #code #web #dev #webDev #webDevelopment #coding #containerQueryUnits

#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