est.social

76 postitusega49 osalejaga9 postitust täna

Ana Tudor 🐯Saw the header here <a href="https://mastodon.social/@sturobson@front-end.social/114279126167674533" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://mastodon.social/@sturobson@front-end.social/114279126167674533</a> and had to make a version that works without JS, works with image backgrounds behind the header, works for any level of page zoom and is fully flexible when it comes to following the text wrapping on resize.Play with it on <a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@codepen</a> <a href="https://codepen.io/thebabydino/pen/MYWxeew" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/thebabydino/pen/MYWxeew</a><a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/SVG" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SVG</a> <a href="https://mastodon.social/tags/filter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#filter</a> <a href="https://mastodon.social/tags/svgFilter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#svgFilter</a> <a href="https://mastodon.social/tags/concave" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#concave</a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#dev</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDevelopment</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#code</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#coding</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a>

Stu RobsonMinimal CSS-only blurry image placeholders<a href="https://leanrada.com/notes/css-only-lqip/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://leanrada.com/notes/css-only-lqip/</a><a href="https://front-end.social/tags/FrontEnd" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#FrontEnd</a> <a href="https://front-end.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://front-end.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebDev</a> <a href="https://front-end.social/tags/WebDesign" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebDesign</a>

Stu RobsonFirst Look at The Modern attr() from <a href="https://front-end.social/@shadeed9" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@shadeed9</a> <a href="https://ishadeed.com/article/modern-attr/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://ishadeed.com/article/modern-attr/</a><a href="https://front-end.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://front-end.social/tags/FrontEnd" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#FrontEnd</a> <a href="https://front-end.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebDev</a>

Adrian RoselliI’ve still not made a demo for CSS inert, partly because I’m trying to grok the nuance. But I’m following the issue.A CSS inert property is risky and the use cases are shaky (IMO).Scott just left good feedback (in addition to the 3 prior comments): <a href="https://github.com/w3c/csswg-drafts/issues/10711#issuecomment-2777119047" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://github.com/w3c/csswg-drafts/issues/10711#issuecomment-2777119047</a><a href="https://toot.cafe/tags/accessibility" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#accessibility</a> <a href="https://toot.cafe/tags/a11y" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#a11y</a> <a href="https://toot.cafe/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a>

Inautilo<a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Development</a> <a href="https://mastodon.social/tags/Previews" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Previews</a> First look at the modern attr() · A new way to use CSS with HTML data attributes <a href="https://ilo.im/16357k" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://ilo.im/16357k</a>_____ <a href="https://mastodon.social/tags/Data" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Data</a> <a href="https://mastodon.social/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML</a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/InlineCSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#InlineCSS</a> <a href="https://mastodon.social/tags/CssGrid" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CssGrid</a> <a href="https://mastodon.social/tags/Chrome" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Chrome</a> <a href="https://mastodon.social/tags/Browser" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Browser</a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebDev</a> <a href="https://mastodon.social/tags/Frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Frontend</a> <a href="https://mastodon.social/tags/JavaScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#JavaScript</a>

Mia (web luddite)Hey y'all, I have a new workshop at the end of April - deepdive into modern CSS Layout techniques. Level up your team with a systemic understanding.The intro video has a demo of <a href="https://front-end.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> grid areas. I’ll post more tips in the lead up. Early-bird pricing til April 12!<a href="https://www.oddbird.net/workshops/cascading-layouts/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://www.oddbird.net/workshops/cascading-layouts/</a>

Peter KrönerOk, _IF_ I have a web component to manage dark/light mode anyway, this component can just expose a custom state which COULD work with :root:has(light-dark-toggle:state(dark))But is there a general CSS-only solution?<a href="https://mastodon.social/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a> <a href="https://mastodon.social/tags/webdev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webdev</a>

Peter KrönerSo I can detect the default light/dark preferences using a media query and implement explict user choice by setting some sort of class on :root. I can write a selector to apply styles depending on the latter condition, and I can write a media query rule to handle the former. Is there any _one_ thing I can wrap my CSS with to handle both cases? Apply dark mode if a certain class is set, and otherwise defer to prefers-color-scheme? Precisely not as shown in the attached code?<a href="https://mastodon.social/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a> <a href="https://mastodon.social/tags/webdev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webdev</a>

Eric A. MeyerEarlier today, the <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> WG resolved to consider a `:heading()` pseudo-class to apply styles to *adjusted* heading levels, contingent on the adoption of `headingoffset` and `headingreset` attributes in HTML (see <a href="https://github.com/w3c/csswg-drafts/issues/10296" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://github.com/w3c/csswg-drafts/issues/10296</a>).For now, it’s assumed `:heading()` will have the same class-level specificity as other pseudo-classes, but the WG is interested in use cases where that decision would cause insurmountable (or just annoying) specificity conflicts with heading-tag selectors.

James BasooTIL the innerText property represents the *rendered* text, not the actual text in the DOM - for that you need textContent. So if you've uppercased your content with <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> it will also be uppercase.I just spent way too long debugging why the <a href="https://mastodon.social/tags/Shopify" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Shopify</a> predictive search breaks if I update the styling of the search button!<a href="https://mastodon.social/tags/JS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#JS</a>

Christian AlderI'm always forgetting the CSS mix-blend-modes, so I put together a little page to help me remember 😊CodePen: <a href="https://codepen.io/HejChristian/full/KwKJdNd/a254d2ff42ba92fb4782207e920af439" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/HejChristian/full/KwKJdNd/a254d2ff42ba92fb4782207e920af439</a><a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/CodePen" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CodePen</a>

argv minus oneI want a program that looks over an <a href="https://mastodon.sdf.org/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML</a> document and its <a href="https://mastodon.sdf.org/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> stylesheets, and applies the stylesheets' rules as `style` attributes on the HTML elements in the document.Meaning this:<html> <style>p:first-child { margin-top: 0 }</style> First paragraph Second paragraph </html>Translates into this:<html> First paragraph Second paragraph </html>Is that a thing?<a href="https://mastodon.sdf.org/tags/programming" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#programming</a> <a href="https://mastodon.sdf.org/tags/webdev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webdev</a>

Mia (web luddite)CSS Working Group resolved to allow range syntax in style queries. We can compare with a container variable:@ container style(--var < 5em)But can also compare normal values:style(1em < 20px) style(sibling-count() > 3)This style function can also be used for conditions of inline if()<a href="https://front-end.social/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a>

CSS by T. Afif :verified:💡 CSS Tip!Use round() and clamp() to create a fluid typography with discrete values. No more rounding issues and font-size equal to 18.12596px!<a href="https://css-tip.com/fluid-typography/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://css-tip.com/fluid-typography/</a><a href="https://front-end.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://front-end.social/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML</a>

Paweł GrzybekI know that I am a little bit late to the party and everyone else has read and published their responses about it, but hey! Sharing is caring!This iteration of the hot debate between two competing specs for CSS masonry layout finally sounds convincing to me. Do you remember when the `gap` property all of a sudden became available inside flex containers? I have the same kind of vibe by reading this.Geat explainer <a href="https://front-end.social/@jensimmons" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@jensimmons</a><a href="https://webkit.org/blog/16587/item-flow-part-1-a-new-unified-concept-for-layout/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://webkit.org/blog/16587/item-flow-part-1-a-new-unified-concept-for-layout/</a><a href="https://mastodon.social/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a>

Adrian Roselli5+ years I’ve been raising concerns about CSS techniques that fail WCAG SC 1.4.4 Resize Text.So the CSSWG goes ahead and just… encodes the failure. <a href="https://github.com/w3c/csswg-drafts/issues/2528#issuecomment-2770261671" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://github.com/w3c/csswg-drafts/issues/2528#issuecomment-2770261671</a>The response? Change WCAG.The CSSWG seriously needs an enforced horizontal <a href="https://toot.cafe/tags/accessibility" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#accessibility</a> review process.<a href="https://toot.cafe/tags/a11y" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#a11y</a> <a href="https://toot.cafe/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a>

Mia (web luddite)CSS Working Group resolved to add an nth-item() function, for selecting a value from multiple options. That could be useful in a lot of situations, but i'm excited to combine with sibling-index():nth-item(sibling-index(), red, orange, yellow, green, …)<a href="https://front-end.social/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a>

Ana Tudor 🐯How would you create this in such a way that its individual parts can be scaled independently, including via <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> animations/ transitions?Here's my take on it <a href="https://www.reddit.com/r/css/comments/1jp1cgu/comment/mkw30mh/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://www.reddit.com/r/css/comments/1jp1cgu/comment/mkw30mh/</a> <a href="https://mastodon.social/tags/cssLayout" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssLayout</a> <a href="https://mastodon.social/tags/cssGrid" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssGrid</a> <a href="https://mastodon.social/tags/SVG" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SVG</a> <a href="https://mastodon.social/tags/filter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#filter</a> <a href="https://mastodon.social/tags/svgFilter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#svgFilter</a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#dev</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDevelopment</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#code</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#coding</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a>

Alvaro Montoro"The Jedi use the cascade for knowledge and defense, never for attack." — <a href="https://front-end.social/@mia" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@mia</a> <a href="https://front-end.social/tags/smashingConf" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#smashingConf</a> <a href="https://front-end.social/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a>

Aral BalkanNew Kitten release• Minor fix: Styles automatically gathered and de-duplicated from the body into the head are now placed _after_ other items in the <head> slot. Since you would expect styles added to the body of the page to override ones in the head, this now brings Kitten’s behaviour in-line with authoring expectations.<a href="https://kitten.small-web.org" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://kitten.small-web.org</a>Enjoy!:kitten:💕<a href="https://mastodon.ar.al/tags/Kitten" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Kitten</a> <a href="https://mastodon.ar.al/tags/SmallWeb" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SmallWeb</a> <a href="https://mastodon.ar.al/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://mastodon.ar.al/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</a> <a href="https://mastodon.ar.al/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#dev</a>

Viimatised otsingud

Otsimisvalikud

Administraator:

Serveri statistika:

#css