#cssunits — Public Fediverse posts

#Development #Techniques
Fixing full-bleed CSS · A novel approach using some at-rule property magic https://ilo.im/16e9hv

_____
#ModernCSS #Layout #FullBleed #CssContainment #CssGrid #CssUnits #WebDev #Frontend #CSS

#Development #Techniques
Fixing full-bleed CSS · A novel approach using some at-rule property magic https://ilo.im/16e9hv

_____
#ModernCSS #Layout #FullBleed #CssContainment #CssGrid #CssUnits #WebDev #Frontend #CSS

#Development #Techniques
Simple full-bleed and breakout styles · Modern CSS solutions for a classic problem https://ilo.im/1682wb

_____
#ModernCSS #CssGrid #CssUnits #FullBleed #Layout #WebDev #Frontend #HTML #CSS

#Development #Techniques
Simple full-bleed and breakout styles · Modern CSS solutions for a classic problem https://ilo.im/1682wb

_____
#ModernCSS #CssGrid #CssUnits #FullBleed #Layout #WebDev #Frontend #HTML #CSS

#Development #Techniques
Transition to the other side · A little CSS magic with container query units https://ilo.im/167m1o

_____
#ModernCSS #CssUnits #CssCalc #Transitions #Animations #WebDev #Frontend #CSS

#Development #Techniques
Transition to the other side · A little CSS magic with container query units https://ilo.im/167m1o

_____
#ModernCSS #CssUnits #CssCalc #Transitions #Animations #WebDev #Frontend #CSS

#Development #Approaches
The best CSS unit for spacing · “We don’t have to choose between px and rem.” https://ilo.im/1673zo

_____
#CssUnits #CssClamp #CssCalc #CustomProperties #WebDev #Browser #Frontend #CSS

#Development #Approaches
The best CSS unit for spacing · “We don’t have to choose between px and rem.” https://ilo.im/1673zo

_____
#CssUnits #CssClamp #CssCalc #CustomProperties #WebDev #Browser #Frontend #CSS

#Development #Techniques
Designing for user font-size and zoom · Using modern CSS units and math functions https://ilo.im/165luy

_____
#ModernCSS #Typography #FluidType #Fonts #Zoom #Browser #WebDev #Frontend #CSS #CssUnits

#Development #Techniques
Designing for user font-size and zoom · Using modern CSS units and math functions https://ilo.im/165luy

_____
#ModernCSS #Typography #FluidType #Fonts #Zoom #Browser #WebDev #Frontend #CSS #CssUnits

#Development #Techniques
The CSS height enigma · Unraveling the mystery of percentage-based heights https://ilo.im/163u5k

_____
#Layout #CssUnits #CssGrid #CssFlexbox #WebDev #Frontend #HTML #CSS

#Development #Techniques
The CSS height enigma · Unraveling the mystery of percentage-based heights https://ilo.im/163u5k

_____
#Layout #CssUnits #CssGrid #CssFlexbox #WebDev #Frontend #HTML #CSS

#Development #Introductions
The CSS shape() function · It brings responsive shapes to modern CSS https://ilo.im/163c8b

_____
#ModernCSS #Shapes #CssCalc #CssUnits #Design #VisualDesign #WebDesign #WebDev #Frontend #CSS

#Development #Introductions
The CSS shape() function · It brings responsive shapes to modern CSS https://ilo.im/163c8b

_____
#ModernCSS #Shapes #CssCalc #CssUnits #Design #VisualDesign #WebDesign #WebDev #Frontend #CSS

#Development #Techniques
Full-bleed layout with modern CSS · Edge-to-edge sections with minimal code https://ilo.im/1621v3

_____
#ModernCSS #Layout #WebDev #Frontend #CSS #CustomProperties #CssUnits #CssCalc

#Development #Techniques
Full-bleed layout with modern CSS · Edge-to-edge sections with minimal code https://ilo.im/1621v3

_____
#ModernCSS #Layout #WebDev #Frontend #CSS #CustomProperties #CssUnits #CssCalc

#Development #Previews
New values and functions in CSS · Long-desired features are making it into the specs https://ilo.im/1605ka

_____
#ModernCSS #CssFunctions #CssUnits #Specification #Browser #WebDev #Frontend #CSS

#Development #Previews
New values and functions in CSS · Long-desired features are making it into the specs https://ilo.im/1605ka

_____
#ModernCSS #CssFunctions #CssUnits #Specification #Browser #WebDev #Frontend #CSS

If you want a fixed aspect-ratio element that always touches either the horizontal or vertical edges of its flexible size and aspect ratio wrapper *which does not coincide with the viewport*, you can make the wrapper a container and use container query units.

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

#CSS #cssLayout #layout #container #containerQueries #containerQuery #cssUnits #code #coding #frontend #web #dev #webDev

If you want a fixed aspect-ratio element that always touches either the horizontal or vertical edges of its flexible size and aspect ratio wrapper *which does not coincide with the viewport*, you can make the wrapper a container and use container query units.

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

#CSS #cssLayout #layout #container #containerQueries #containerQuery #cssUnits #code #coding #frontend #web #dev #webDev

As exciting (and useful) all the new #CSS units are, it looks like things working as expected with them isn't a thing for now.

Safari has problems with `lh` https://bugs.webkit.org/show_bug.cgi?id=267185 and doesn't seem to support `cap` (at least from what I've tested in Epiphany).

#bug #cssBug #Safari #SafariBug #code #coding #cssUnits #frontend #webDev #webDevelopment

As exciting (and useful) all the new #CSS units are, it looks like things working as expected with them isn't a thing for now.

Safari has problems with `lh` https://bugs.webkit.org/show_bug.cgi?id=267185 and doesn't seem to support `cap` (at least from what I've tested in Epiphany).

#bug #cssBug #Safari #SafariBug #code #coding #cssUnits #frontend #webDev #webDevelopment

#Development #Approaches
Why you should use px units for spacing techniques · The drawbacks of using relative units for margin, padding, and the like https://ilo.im/15fman

_____
#WebDev #WebDesign #ResponsiveDesign #Frontend #CSS #CssUnits

#Development #Approaches
Why you should use px units for spacing techniques · The drawbacks of using relative units for margin, padding, and the like https://ilo.im/15fman

_____
#WebDev #WebDesign #ResponsiveDesign #Frontend #CSS #CssUnits

#Development #Guides
An overview of CSS sizing units · Size units are vital to crafting optimal cross-media/device layouts https://ilo.im/14k8tr

_____
#CssLayouts #Browser #WebDev #Frontend #Viewport #CSS #SeizingUnits #CssUnits

#Development #Guides
An overview of CSS sizing units · Size units are vital to crafting optimal cross-media/device layouts https://ilo.im/14k8tr

_____
#CssLayouts #Browser #WebDev #Frontend #Viewport #CSS #SeizingUnits #CssUnits

#Development #Introductions
New CSS viewport units · Say hello to the small, large, and dynamic viewport units https://ilo.im/14209x

_____
#CSS #CssUnits #UseCases #WebDevelopment #WebDev #Frontend #Demos #Viewport #svh #lvh #dvh

#Development #Introductions
New CSS viewport units · Say hello to the small, large, and dynamic viewport units https://ilo.im/14209x

_____
#CSS #CssUnits #UseCases #WebDevelopment #WebDev #Frontend #Demos #Viewport #svh #lvh #dvh

#Development #Explorations
Re-evaluating px vs em in Media Queries · Is the common recommendation to use ems instead of pxs still valid? https://ilo.im/13esaa

_____
#Browser #BrowserCompatibility #Chrome #Firefox #Safari #WebDevelopment #WebDev #Frontend #CSS #MediaQuery #Zoom #FontSize #CssUnits #px #em #rem

#Development #Explorations
Re-evaluating px vs em in Media Queries · Is the common recommendation to use ems instead of pxs still valid? https://ilo.im/13esaa

_____
#Browser #BrowserCompatibility #Chrome #Firefox #Safari #WebDevelopment #WebDev #Frontend #CSS #MediaQuery #Zoom #FontSize #CssUnits #px #em #rem