MastodonTech.de

Inautilo<a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="nofollow noopener" target="_blank">#Development</a> <a href="https://mastodon.social/tags/Approaches" class="mention hashtag" rel="nofollow noopener" target="_blank">#Approaches</a> The best CSS unit for spacing · “We don’t have to choose between px and rem.” <a href="https://ilo.im/1673zo" rel="nofollow noopener" translate="no" target="_blank">https://ilo.im/1673zo</a>_____ <a href="https://mastodon.social/tags/CssUnits" class="mention hashtag" rel="nofollow noopener" target="_blank">#CssUnits</a> <a href="https://mastodon.social/tags/CssClamp" class="mention hashtag" rel="nofollow noopener" target="_blank">#CssClamp</a> <a href="https://mastodon.social/tags/CssCalc" class="mention hashtag" rel="nofollow noopener" target="_blank">#CssCalc</a> <a href="https://mastodon.social/tags/CustomProperties" class="mention hashtag" rel="nofollow noopener" target="_blank">#CustomProperties</a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebDev</a> <a href="https://mastodon.social/tags/Browser" class="mention hashtag" rel="nofollow noopener" target="_blank">#Browser</a> <a href="https://mastodon.social/tags/Frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#Frontend</a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a>

Inautilo<a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="nofollow noopener" target="_blank">#Development</a> <a href="https://mastodon.social/tags/Techniques" class="mention hashtag" rel="nofollow noopener" target="_blank">#Techniques</a> Designing for user font-size and zoom · Using modern CSS units and math functions <a href="https://ilo.im/165luy" rel="nofollow noopener" translate="no" target="_blank">https://ilo.im/165luy</a>_____ <a href="https://mastodon.social/tags/ModernCSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#ModernCSS</a> <a href="https://mastodon.social/tags/Typography" class="mention hashtag" rel="nofollow noopener" target="_blank">#Typography</a> <a href="https://mastodon.social/tags/FluidType" class="mention hashtag" rel="nofollow noopener" target="_blank">#FluidType</a> <a href="https://mastodon.social/tags/Fonts" class="mention hashtag" rel="nofollow noopener" target="_blank">#Fonts</a> <a href="https://mastodon.social/tags/Zoom" class="mention hashtag" rel="nofollow noopener" target="_blank">#Zoom</a> <a href="https://mastodon.social/tags/Browser" class="mention hashtag" rel="nofollow noopener" target="_blank">#Browser</a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebDev</a> <a href="https://mastodon.social/tags/Frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#Frontend</a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/CssUnits" class="mention hashtag" rel="nofollow noopener" target="_blank">#CssUnits</a>

Inautilo<a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="nofollow noopener" target="_blank">#Development</a> <a href="https://mastodon.social/tags/Techniques" class="mention hashtag" rel="nofollow noopener" target="_blank">#Techniques</a> The CSS height enigma · Unraveling the mystery of percentage-based heights <a href="https://ilo.im/163u5k" rel="nofollow noopener" translate="no" target="_blank">https://ilo.im/163u5k</a>_____ <a href="https://mastodon.social/tags/Layout" class="mention hashtag" rel="nofollow noopener" target="_blank">#Layout</a> <a href="https://mastodon.social/tags/CssUnits" class="mention hashtag" rel="nofollow noopener" target="_blank">#CssUnits</a> <a href="https://mastodon.social/tags/CssGrid" class="mention hashtag" rel="nofollow noopener" target="_blank">#CssGrid</a> <a href="https://mastodon.social/tags/CssFlexbox" class="mention hashtag" rel="nofollow noopener" target="_blank">#CssFlexbox</a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebDev</a> <a href="https://mastodon.social/tags/Frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#Frontend</a> <a href="https://mastodon.social/tags/HTML" class="mention hashtag" rel="nofollow noopener" target="_blank">#HTML</a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a>

Inautilo<a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="nofollow noopener" target="_blank">#Development</a> <a href="https://mastodon.social/tags/Introductions" class="mention hashtag" rel="nofollow noopener" target="_blank">#Introductions</a> The CSS shape() function · It brings responsive shapes to modern CSS <a href="https://ilo.im/163c8b" rel="nofollow noopener" translate="no" target="_blank">https://ilo.im/163c8b</a>_____ <a href="https://mastodon.social/tags/ModernCSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#ModernCSS</a> <a href="https://mastodon.social/tags/Shapes" class="mention hashtag" rel="nofollow noopener" target="_blank">#Shapes</a> <a href="https://mastodon.social/tags/CssCalc" class="mention hashtag" rel="nofollow noopener" target="_blank">#CssCalc</a> <a href="https://mastodon.social/tags/CssUnits" class="mention hashtag" rel="nofollow noopener" target="_blank">#CssUnits</a> <a href="https://mastodon.social/tags/Design" class="mention hashtag" rel="nofollow noopener" target="_blank">#Design</a> <a href="https://mastodon.social/tags/VisualDesign" class="mention hashtag" rel="nofollow noopener" target="_blank">#VisualDesign</a> <a href="https://mastodon.social/tags/WebDesign" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebDesign</a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebDev</a> <a href="https://mastodon.social/tags/Frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#Frontend</a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a>

Inautilo<a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="nofollow noopener" target="_blank">#Development</a> <a href="https://mastodon.social/tags/Techniques" class="mention hashtag" rel="nofollow noopener" target="_blank">#Techniques</a> Full-bleed layout with modern CSS · Edge-to-edge sections with minimal code <a href="https://ilo.im/1621v3" rel="nofollow noopener" translate="no" target="_blank">https://ilo.im/1621v3</a>_____ <a href="https://mastodon.social/tags/ModernCSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#ModernCSS</a> <a href="https://mastodon.social/tags/Layout" class="mention hashtag" rel="nofollow noopener" target="_blank">#Layout</a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebDev</a> <a href="https://mastodon.social/tags/Frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#Frontend</a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/CustomProperties" class="mention hashtag" rel="nofollow noopener" target="_blank">#CustomProperties</a> <a href="https://mastodon.social/tags/CssUnits" class="mention hashtag" rel="nofollow noopener" target="_blank">#CssUnits</a> <a href="https://mastodon.social/tags/CssCalc" class="mention hashtag" rel="nofollow noopener" target="_blank">#CssCalc</a>

Inautilo<a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="nofollow noopener" target="_blank">#Development</a> <a href="https://mastodon.social/tags/Previews" class="mention hashtag" rel="nofollow noopener" target="_blank">#Previews</a> New values and functions in CSS · Long-desired features are making it into the specs <a href="https://ilo.im/1605ka" rel="nofollow noopener" translate="no" target="_blank">https://ilo.im/1605ka</a>_____ <a href="https://mastodon.social/tags/ModernCSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#ModernCSS</a> <a href="https://mastodon.social/tags/CssFunctions" class="mention hashtag" rel="nofollow noopener" target="_blank">#CssFunctions</a> <a href="https://mastodon.social/tags/CssUnits" class="mention hashtag" rel="nofollow noopener" target="_blank">#CssUnits</a> <a href="https://mastodon.social/tags/Specification" class="mention hashtag" rel="nofollow noopener" target="_blank">#Specification</a> <a href="https://mastodon.social/tags/Browser" class="mention hashtag" rel="nofollow noopener" target="_blank">#Browser</a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebDev</a> <a href="https://mastodon.social/tags/Frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#Frontend</a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a>

Ana Tudor 🐯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 <a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener" target="_blank">@codepen</a> <a href="https://codepen.io/thebabydino/pen/ExzbVmP" rel="nofollow noopener" translate="no" target="_blank">https://codepen.io/thebabydino/pen/ExzbVmP</a><a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/cssLayout" class="mention hashtag" rel="nofollow noopener" target="_blank">#cssLayout</a> <a href="https://mastodon.social/tags/layout" class="mention hashtag" rel="nofollow noopener" target="_blank">#layout</a> <a href="https://mastodon.social/tags/container" class="mention hashtag" rel="nofollow noopener" target="_blank">#container</a> <a href="https://mastodon.social/tags/containerQueries" class="mention hashtag" rel="nofollow noopener" target="_blank">#containerQueries</a> <a href="https://mastodon.social/tags/containerQuery" class="mention hashtag" rel="nofollow noopener" target="_blank">#containerQuery</a> <a href="https://mastodon.social/tags/cssUnits" class="mention hashtag" rel="nofollow noopener" target="_blank">#cssUnits</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#code</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#coding</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#web</a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#dev</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDev</a>

Ana Tudor 🐯As exciting (and useful) all the new <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> units are, it looks like things working as expected with them isn't a thing for now.Safari has problems with `lh` <a href="https://bugs.webkit.org/show_bug.cgi?id=267185" rel="nofollow noopener" translate="no" target="_blank">https://bugs.webkit.org/show_bug.cgi?id=267185</a> and doesn't seem to support `cap` (at least from what I've tested in Epiphany).<a href="https://mastodon.social/tags/bug" class="mention hashtag" rel="nofollow noopener" target="_blank">#bug</a> <a href="https://mastodon.social/tags/cssBug" class="mention hashtag" rel="nofollow noopener" target="_blank">#cssBug</a> <a href="https://mastodon.social/tags/Safari" class="mention hashtag" rel="nofollow noopener" target="_blank">#Safari</a> <a href="https://mastodon.social/tags/SafariBug" class="mention hashtag" rel="nofollow noopener" target="_blank">#SafariBug</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#code</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#coding</a> <a href="https://mastodon.social/tags/cssUnits" class="mention hashtag" rel="nofollow noopener" target="_blank">#cssUnits</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDevelopment</a>

Frühere Suchanfragen

Suchoptionen

Verwaltet von:

Serverstatistik:

#cssunits