# css variables Published articles for css variables. This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles. ## Managing Custom Spacing Between Flexbox and Grid Items with CSS DevFeed: [Managing Custom Spacing Between Flexbox and Grid Items with CSS]() Original publisher: [Read original article]() Author: Ahmad Shadeed Published: 2025-03-18T00:00:00Z Content type: tutorial Language: en Sources: [Ahmad Shadeed]() Topics: [CSS](), [layout](), [Web Development]() Tags: [container](), [css](), [css-variables](), [flexbox](), [grid](), [layout](), [margins](), [spacing]() ### AI overview This tutorial examines ways to create custom spacing between flexbox or grid items. It compares margins, nested containers, and the default flow layout, then demonstrates using CSS variables with a flow utility. ### Source excerpt Thinking of a way to have a custom gap between some flex or grid items. ## Inline conditionals in CSS, now? DevFeed: [Inline conditionals in CSS, now?]() Original publisher: [Read original article]() Author: Lea Verou Published: 2024-06-21T00:00:00Z Content type: opinion Language: en Sources: [Lea Verou's blog]() Topics: [conditionals](), [CSS](), [Web platform](), [web-standards](), [abstraction](), [Vue.js]() Tags: [blog](), [conditionals](), [css](), [css-variables](), [css-wg](), [developers](), [vue](), [web-components](), [web-platform]() ### AI overview The article examines the gap between the CSS Working Group's planned if() function and current browser support. It presents custom-property hacks as interim options and argues that production decisions should prioritize user needs over developer convenience, drawing on Web Platform Design Principles and the Priority of Constituencies. ### Source excerpt The CSS WG resolved to add if() to CSS, but that won't be in browsers for a while. What are our options in the meantime? A couple days ago, I posted about the recent CSS WG resolution to add an if() function to CSS. Great as it may be, this is still a long way off, two years if everything goes super smoothly, more if not. So what can you do when you need conditionals right now? You may be pleased to find that you're not completely out of luck. There is a series of brilliant, horrible hacks that enable you to expose the kinds of higher level custom properties that conditionals typically enable. Using hacks in production?! The instinctive reaction many developers have when seeing hacks like these is "Nice hack, but can't possibly ever use this in production". This sounds reasonable on the surface (keeping the codebase maintainable is a worthy goal!) but when examined deeply, it reflects the wrong order of priorities, prioritizing developer convenience over user convenience. The TAG maintains a Web Platform Design Principles document 1 that everyone designing APIs for the web platform is supposed to read and follow. I'm a strong believer in having published Design Principles, for any product2. They help stay on track, and remember what the big picture vision is, which is otherwise easy to lose sight of in the day to day minutiae. One of the core principles in the document is the Priority of Constituencies. The core of it is: User needs come before the needs of web page authors, which come before the needs of user agent implementors, which come before the needs of specification writers, which come before theoretical purity. Obviously in most projects there are far fewer stakeholders than for the whole web platform, but the spirit of the principle still applies: the higher the abstraction, the higher priority the user needs. Or, in other words, consumers above producers. For a more relatable example, in a web app using a framework like e.g. Vue and several Vue components ## Inline conditionals in CSS? DevFeed: [Inline conditionals in CSS?]() Original publisher: [Read original article]() Author: Lea Verou Published: 2024-06-18T00:00:00Z Content type: article Language: en Sources: [Lea Verou's blog]() Topics: [CSS](), [conditionals](), [modern web development](), [Web Development](), [browsers]() Tags: [blog](), [conditionals](), [css](), [css-variables](), [css-wg](), [developers](), [iteration](), [roadmaps](), [web-components](), [web-standards]() ### AI overview The article discusses the CSS Working Group's consensus to add an inline if() conditional syntax to CSS. It explains the proposal's motivation, relationship to style queries, and path through earlier rejected proposals. ### Source excerpt Last week, the CSS WG resolved to add an inline if() to CSS. But what does that mean, and why is it exciting? Last week, we had a CSS WG face-to-face meeting in A CoruΓ±a, Spain. There is one resolution from that meeting that I'm particularly excited about: the consensus to add an inline if() to CSS. While I was not the first to propose an inline conditional syntax, I did try and scope down the various nonterminating discussions into an MVP that can actually be implemented quickly, discussed ideas with implemenators, and eventually published a concrete proposal and pushed for group resolution. Quite poetically, the relevant discussion occurred on my birthday, so in a way, I got if() as the most unique birthday present ever. πŸ˜€ This also comes to show that proposals being rejected is not the end-all for a given feature. It is in fact quite common for features to be rejected for several times before they are accepted: CSS Nesting, :has(), container queries were all simply the last iteration in a series of rejected proposals. if() itself was apparently rejected in 2018 with very similar syntax to what I proposed. What was the difference? Style queries had already shipped, and we could simply reference the same syntax for conditions (plus media() and supports() from Tab's @when proposal) whereas in the 2018 proposal how conditions would work was largely undefined. I posted about this on a variety of social media, and the response by developers has been overwhelmingly positive: Twitter LinkedIn Mastodon I even had friends from big companies writing to tell me their internal Slacks blew up about it. This proves what I've always suspected, and was part of the case I made to the CSS WG: that this is a huge pain point. Hopefully the amount and intensity of positive reactions will help browsers prioritize this feature and add it to their roadmaps earlier rather than later. Across all these platforms, besides the "I can't wait for this to ship!" sentiment being most common, ther ## CSS Style Queries DevFeed: [CSS Style Queries]() Original publisher: [Read original article]() Author: Ahmad Shadeed Published: 2022-12-19T00:00:00Z Content type: tutorial Language: en Sources: [Ahmad Shadeed]() Topics: [CSS](), [browsers](), [Web platform](), [Chrome](), [modern web development](), [border-image](), [how to create smooth CSS transitions]() Tags: [browsers](), [canary](), [chrome](), [component](), [container](), [css](), [css-variables](), [experimental](), [queries](), [query](), [selector](), [style](), [subgrid]() ### AI overview This tutorial explains CSS style queries, which query a container's CSS property or variable instead of its size. It describes their experimental implementation in Chrome Canary and contrasts them with container size queries. ### Source excerpt For me, 2022 is the best year ever for CSS. We got a lot of new stuff supported in stable browsers and it's just like living a dream. From CSS subgrid, :has selector, container queries, and the new viewport units. So many things to grasp, I understand - but I'm sure we agree that this is exciting, isn't it? Recently, the Chrome team released experimental support for a new proposed CSS spec, style queries. In short, they let us query the style of a container, rather than the size only. ## Aligning Content In Different Wrappers DevFeed: [Aligning Content In Different Wrappers]() Original publisher: [Read original article]() Author: Ahmad Shadeed Published: 2022-03-14T00:00:00Z Content type: tutorial Language: en Sources: [Ahmad Shadeed]() Topics: [CSS](), [layout](), [modern web development](), [Web Development](), [function]() Tags: [align](), [calc](), [content](), [css](), [css-variables](), [how-to](), [layout](), [max](), [padding](), [viewport](), [wrapper]() ### AI overview A tutorial on aligning content across different wrappers in a responsive article layout. It derives dynamic padding from the viewport and wrapper widths, then applies CSS viewport units, calc(), max(), and CSS variables to keep the alignment consistent across screen sizes, including mobile. ### Source excerpt How to align content with another section given that they are placed in different wrappers ## Yak Shaving and md-block: A New HTML Element for Rendering Markdown DevFeed: [Yak Shaving and md-block: A New HTML Element for Rendering Markdown]() Original publisher: [Read original article]() Author: Lea Verou Published: 2021-11-26T00:00:00Z Content type: article Language: en Sources: [Lea Verou's blog]() Topics: [Markdown](), [HTML](), [Web Development](), [CSS](), [Library](), [PostCSS](), [npm](), [Open Source](), [Sass]() Tags: [blog](), [css](), [css-variables](), [esm](), [html](), [js](), [library](), [markdown](), [npm](), [open-source](), [original](), [personal](), [postcss](), [releases](), [sass](), [stretchy](), [web-components](), [yak-shaving]() ### AI overview The author recounts a chain of software work that began with a web component and expanded into reusable libraries, a Stretchy rewrite, documentation updates, and the creation of md-block, a web component for rendering inline and remote Markdown. ### Source excerpt This week has been Yak Shaving Galore. It went a bit like this: I've been working on a web component that I need for the project I'm working on. More on that later, but let's call it for now. Of course that needs to be developed as a separate reusable library and released as a separate open source project. No, this is not the titular component, this was only level 1 of my multi-level yak shaving... πŸ€¦πŸ½β™€ I wanted to showcase various usage examples of that component in its page, so I made another component for these demos: . This demo component would have markup with editable parts on one side and the live rendering on the other side. I wanted the editable parts to autosize as you type. Hey, I've written a library for that in the past, it's called Stretchy! But Stretchy was not written in ESM, nor did it support Shadow DOM. I must rewrite Stretchy in ESM and support Shadow DOM first! Surely it won't take more than a half hour, it's a tiny library. (It took more than a half hour) Ok, now I have a nice lil' module, but I also need to export IIFE as well, so that it's compatible with Stretchy v1. Let's switch to Rollup and npm scripts and ditch Gulp. Oh look, Stretchy's CSS is still written in Sass, even though it doesn't really need it now. Let's rewrite it to use CSS variables, use PostCSS for nesting, and use conic-gradient() instead of inline SVG data URIs. Ok, Stretchy v2 is ready, now I need to update its docs. Oooh, it doesn't have a README? I should add one. But I don't want to duplicate content between the page and the README. Hmmm, if only... I know! I'll make a web component for rendering both inline and remote Markdown! I have an unfinished one lying around somewhere, surely it won't take more than a couple hours to finish it? (It took almost a day, two with docs, demos etc) Done! Here it is! https://md-block.verou.me Great! Now I can update Stretchy's docs and release its v2 Great! Now I can use Stretchy in my component demoing ## Custom properties with defaults: 3+1 strategies DevFeed: [Custom properties with defaults: 3+1 strategies]() Original publisher: [Read original article]() Author: Lea Verou Published: 2021-10-15T00:00:00Z Content type: tutorial Language: en Sources: [Lea Verou's blog]() Topics: [CSS](), [Web Components](), [Code](), [Web Development]() Tags: [articles](), [blog](), [component](), [components](), [css](), [css-custom-properties](), [css-variables](), [custom-properties](), [dynamic-css](), [fallback](), [inheritance](), [original](), [properties](), [specificity](), [strategies](), [tutorials]() ### AI overview A tutorial on strategies for giving CSS custom properties default values in customizable components. It compares fallbacks, inherited values, specificity concerns, and internal custom properties. ### Source excerpt When developing customizable components, one often wants to expose various parameters of the styling as custom properties, and form a sort of CSS API. This is still underutlized, but there are libraries, e.g. Shoelace, that already list custom properties alongside other parts of each component's API (even CSS parts!). Note: I'm using "component" here broadly, as any reusable chunk of HTML/CSS/JS, not necessarily a web component or framework component. What we are going to discuss applies to reusable chunks of HTML just as much as it does to "proper" web components. Let's suppose we are designing a certain button styling, that looks like this: We want to support a --color custom property for creating color variations by setting multiple things internally: .fancy-button { border: .1em solid var(--color); background: transparent; color: var(--color); } .fancy-button:hover { background: var(--color); color: white; } Note that with the code above, if no --color is set, the three declarations using it will be IACVT and thus we'll get a nearly unstyled text-only button with no background on hover (transparent), no border on hover, and the default black text color (canvastext to be precise). That's no good! IT's important that we set defaults. However, using the fallback parameter for this gets tedious, and WET: .fancy-button { border: .1em solid var(--color, black); background: transparent; color: var(--color, black); } .fancy-button:hover { background: var(--color, black); color: white; } To avoid the repetition and still ensure --color always has a value, many people do this: .fancy-button { --color: black; border: .1em solid var(--color); background: transparent; color: var(--color); } .fancy-button:hover { background: var(--color); color: white; } However, this is not ideal for a number of reasons: It means that people cannot take advantage of inheritance to set --color on an ancestor. It means that people need to use specificity that overrides your own rules to set th ## How CSS \`revert\` Resolves Custom Properties DevFeed: [How CSS \`revert\` Resolves Custom Properties]() Original publisher: [Read original article]() Author: Lea Verou Published: 2021-05-21T00:00:00Z Content type: tutorial Language: en Sources: [Lea Verou's blog]() Topics: [CSS](), [Web Development](), [Code]() Tags: [blog](), [chrome](), [color](), [css](), [css-variables](), [custom-properties](), [dynamic-css](), [properties](), [variables]() ### AI overview This article explains how the CSS `revert` keyword interacts with custom properties, inheritance, and fallback values. It shows why a custom property can resolve to its inherited value and how registering a non-inheriting property changes the result. ### Source excerpt (I always wanted to do a clickbait title like this and when this chance came along I could not pass it up. πŸ˜… Sorry!) While putting my ideas into slides for my Dynamic CSS workshop for next week, I was working on a slide explaining how the CSS wide keywords work with custom properties. inherit, initial, unset I had used numerous times and knew well. But what about revert? How did that work? I had an idea, but quickly coded up a demo to try it out. The code was: :root { --accent-color: skyblue; } div { --accent-color: revert; background: var(--accent-color, orange); } Phew, I was correct, but the amount of uncertainty I had before seeing the result tipped me that I might be on to something. Before you read on, take a moment to think about what you would vote. Warning: Spoilers ahead! πŸ€” πŸ€” πŸ€” πŸ€” So I posted a quiz on Twitter: https://twitter.com/LeaVerou/status/1395379573190168576 These were the results after the 24 hours it ran for: orange was the clear winner, and the actual correct answer, skyblue only got 18.1%, nearly the same as transparent! If you got it wrong, you're in very good company: not only did 82% of poll respondents get it wrong as well, but even the editor of the CSS Variables spec and co-editor of CSS Cascading and Inheritance (which defines revert), Tab Atkins, told me privately that he got it wrong too: he voted for orange! (Yes, I did get his permission to mention this) So what actually happens? Why do we get skyblue? I will try to explain as best as I can. Let's start by what revert does: It reverts the cascaded value of the property from its current value to the value the property would have had if no changes had been made by the current style origin to the current element. This means it cancels out any author styles, and resets back to whatever value the property would have from the user stylesheet and UA stylesheet. Assuming there is no --accent-color declaration in the user stylesheet, and of course UA stylesheets don't set custom properties, th ## Practical Use Cases For CSS Variables DevFeed: [Practical Use Cases For CSS Variables]() Original publisher: [Read original article]() Author: Ahmad Shadeed Published: 2021-04-27T00:00:00Z Content type: tutorial Language: en Sources: [Ahmad Shadeed]() Topics: [CSS](), [Web Development](), [modern web development](), [Variable](), [ui]() Tags: [code](), [css](), [css-variables](), [custom](), [html](), [javascript](), [practical](), [properties](), [use-cases](), [variables]() ### AI overview A practical tutorial on using CSS variables beyond simple color tokens. It covers reducing repeated CSS, varying longhand properties such as padding, simplifying CSS backgrounds, and dynamically supplying background image values with JavaScript. ### Source excerpt The goal of this article is to walk you through use-cases where CSS variables shine. ## Dark mode in 5 minutes, with inverted lightness variables DevFeed: [Dark mode in 5 minutes, with inverted lightness variables]() Original publisher: [Read original article]() Author: Lea Verou Published: 2021-03-30T00:00:00Z Content type: tutorial Language: en Sources: [Lea Verou's blog]() Topics: [Dark Mode](), [CSS](), [Web Development](), [color]() Tags: [articles](), [blog](), [color](), [css](), [css-variables](), [custom-properties](), [dark-mode](), [hsl](), [lch](), [original](), [tutorials](), [variables]() ### AI overview A tutorial presents a quick dark-mode approach using CSS custom properties for color lightness. The method inverts lightness variables in dark mode and is described as a useful starting point that should later be refined for better design and contrast. ### Source excerpt By now, you probably know that you can use custom properties for individual color components, to avoid repeating the same color coordinates multiple times throughout your theme. You may even know that you can use the same variable for multiple components, e.g. HSL hue and lightness: :root { --primary-hs: 250 30%; } h1 { color: hsl(var(--primary-hs) 30%); } article { background: hsl(var(--primary-hs) 90%); } article h2 { background: hsl(var(--primary-hs) 40%); color: white; } Here is a very simple page designed with this technque: CodePen Embed Fallback Unlike preprocessor variables, you could even locally override the variable, to have blocks with a different accent color: :root { --primary-hs: 250 30%; --secondary-hs: 190 40%; } article { background: hsl(var(--primary-hs) 90%); } article.alt { --primary-hs: var(--secondary-hs); } CodePen Embed Fallback This is all fine and dandy, until dark mode comes into play. The idea of using custom properties to make it easier to adapt a theme to dark mode is not new. However, in every article I have seen, the strategy suggested is to create a bunch of custom properties, one for each color, and override them in a media query. This is a fine approach, and you'll likely want to do that for at least part of your colors eventually. However, even in the most disciplined of designs, not every color is a CSS variable. You often have colors declared inline, especially grays (e.g. the footer color in our example). This means that adding a dark mode is taxing enough that you may put it off for later, especially on side projects. The trick I'm going to show you will make anyone who knows enough about color cringe (sorry Chris!) but it does help you create a dark mode that works in minutes. It won't be great, and you should eventually tweak it to create a proper dark mode (also dark mode is not just about swapping colors) but it's better than nothing and can serve as a base. The basic idea is to use custom properties for the lightness of ## Styled-components best practices for React and CSS DevFeed: [Styled-components best practices for React and CSS]() Original publisher: [Read original article]() Author: Josh W. Comeau Published: 2021-01-25T11:30:00Z Content type: tutorial Language: en Sources: [Josh Comeau's blog]() Topics: [styled-components](), [React](), [CSS](), [Library](), [Code](), [Web Development]() Tags: [best-practices](), [code](), [css](), [css-variables](), [developers](), [how-to](), [library](), [react](), [styled-components]() ### AI overview This article presents practical best practices for using styled-components to manage CSS in React applications. It focuses on CSS variables, performance, modularity, mental models, and reducing dependence on proprietary APIs. ### Source excerpt styled-components is a wonderfully powerful styling library for React, and over the years I've learned a lot about how to use it effectively. This article shares my personal "best practices". ## The --var: ; hack to toggle multiple values with one custom property DevFeed: [The --var: ; hack to toggle multiple values with one custom property]() Original publisher: [Read original article]() Author: Lea Verou Published: 2020-10-12T00:00:00Z Content type: tutorial Language: en Sources: [Lea Verou's blog]() Topics: [CSS](), [modern web development](), [Web Development](), [Code]() Tags: [blog](), [code](), [conditionals](), [css](), [css-variables](), [function](), [original](), [property](), [tips](), [var]() ### AI overview A CSS technique uses custom property values such as `initial` and whitespace to toggle multiple declarations across properties and rules. The article explains how fallback values enable the technique and discusses its limitations. ### Source excerpt What if I told you you could use a single property value to turn multiple different values on and off across multiple different properties and even across multiple CSS rules? What if I told you you could turn this flat button into a glossy skeuomorphic button by just tweaking one custom property --is-raised, and that would set its border, background image, box and text shadows in one fell swoop? How, you may ask? The crux of this technique is this: There are two custom property values that work almost everywhere there is a var() call with a fallback. The more obvious one that you probably already know is the initial value, which makes the property just apply its fallback. So, in the following code: background: var(--foo, linear-gradient(white, transparent)) hsl(220 10% 50%); border: 1px solid var(--foo, rgb(0 0 0 / .1)); color: rgb(0 0 0 var(--foo, / .8)); We can set --foo to initial to enable these "fallbacks" and append these values to the property value, adding a gradient, setting a border-color, and making the text color translucent in one go. But what to do when we want to turn these values off? Any non-initial value for --foo (that doesn't create cycles) should work. But is there one that works in all three declarations? It turns out there is another value that works everywhere, in every property a var() reference is present, and you'd likely never guess what it is (unless you have watched any of my CSS variable talks and have a good memory for passing mentions of things). Intrigued? It's whitespace! Whitespace is significant in a custom property. When you write something like this: --foo: ; This is not an invalid declaration. This is a declaration where the value of --foo is literally one space character. However, whitespace is valid in every CSS property value, everywhere a var() is allowed, and does not affect its computed value in any way. So, we can just set our property to one space (or even a comment) and not affect any other value present in the declar ## CSS Variables 101 DevFeed: [CSS Variables 101]() Original publisher: [Read original article]() Author: Ahmad Shadeed Published: 2020-10-06T00:00:00Z Content type: tutorial Language: en Sources: [Ahmad Shadeed]() Topics: [CSS](), [Front end](), [Web Development](), [Programming]() Tags: [css](), [css-variables](), [custom-properties](), [custom-variables](), [front-end](), [how-to](), [learn]() ### AI overview A detailed tutorial on CSS variables, also known as custom properties. It explains their purpose, reusable values, naming rules, scoping, overrides, and fallback values, with examples and use cases. ### Source excerpt Learn about CSS variables (CSS custom properties) in detail. ## CSS Mistakes While On Autopilot DevFeed: [CSS Mistakes While On Autopilot]() Original publisher: [Read original article]() Author: Ahmad Shadeed Published: 2020-08-09T00:00:00Z Content type: article Language: en Sources: [Ahmad Shadeed]() Topics: [CSS](), [Front end](), [debugging](), [Web Development]() Tags: [box-shadow](), [calc](), [color](), [css](), [css-color](), [css-grid](), [css-variables](), [debugging-css](), [developer](), [display](), [editor](), [front-end](), [go](), [highlighting](), [mistakes](), [padding](), [properties](), [property](), [units](), [variables]() ### AI overview An article about common CSS mistakes developers make while working on web projects, including errors involving font properties, opacity, padding, CSS Grid, variables, box shadows, positioning, calc(), colors, display, and transforms. It also mentions an ebook about debugging CSS. ### Source excerpt When we're very focused on working on a web project, we tend to forget or do some mistakes that can lead to an invalid CSS code. I like to call these "Autopilot mistakes". The kind of mistakes that make us ask ourselves: "Oops, why did I do that?", and solving them doesn't take much time, only if you found them in the first place. I asked on Twitter about the funniest mistakes that a front-end developer can do, and I got some funny responses. What's the *funniest* CSS mistake that you do a lot? ## The Cicada Principle, revisited with CSS variables DevFeed: [The Cicada Principle, revisited with CSS variables]() Original publisher: [Read original article]() Author: Lea Verou Published: 2020-07-07T00:00:00Z Content type: tutorial Language: en Sources: [Lea Verou's blog]() Topics: [CSS](), [web design](), [primes](), [Web Development](), [Code]() Tags: [articles](), [blog](), [clip-path](), [code](), [css](), [css-variables](), [design](), [nth-of-type](), [original](), [primes](), [selector](), [sequence]() ### AI overview A tutorial revisits the Cicada Principle for creating pseudo-random visual patterns in web designs. It explains how CSS variables and nth-of-type rules, combined with prime-number intervals, can vary repeating shapes and effects. ### Source excerpt Many of today's web crafters were not writing CSS at the time Alex Walker's landmark article The Cicada Principle and Why it Matters to Web Designers was published in 2011. Last I heard of it was in 2016, when it was used in conjunction with blend modes to pseudo-randomize backgrounds even further. So what is the Cicada Principle and how does it relate to web design in a nutshell? It boils down to: when using repeating elements (tiled backgrounds, different effects on multiple elements etc), using prime numbers for the size of the repeating unit maximizes the appearance of organic randomness. Note that this only works when the parameters you set are independent. When I recently redesigned my blog, I ended up using a variation of the Cicada principle to pseudo-randomize the angles of code snippets. I didn't think much of it until I saw this tweet: https://twitter.com/StuRobson/status/1273904521132072960 This made me think: hey, maybe I should actually write a blog post about the technique. After all, the technique itself is useful for way more than angles on code snippets. The main idea is simple: You write your main rule using CSS variables, and then use :nth-of-*() rules to set these variables to something different every N items. If you use enough variables, and choose your Ns for them to be prime numbers, you reach a good appearance of pseudo-randomness with relatively small Ns. In the case of code samples, I only have two different top cuts (going up or going down) and two different bottom cuts (same), which produce 2*2 = 4 different shapes. Since I only had four shapes, I wanted to maximize the pseudo-randomness of their order. A first attempt looks like this: pre { clip-path: polygon(var(--clip-top), var(--clip-bottom)); --clip-top: 0 0, 100% 2em; --clip-bottom: 100% calc(100% - 1.5em), 0 100%; } pre:nth-of-type(odd) { --clip-top: 0 2em, 100% 0; } pre:nth-of-type(3n + 1) { --clip-bottom: 100% 100%, 0 calc(100% - 1.5em); } This way, the exact sequence of shapes ## Hybrid positioning with CSS variables and max() DevFeed: [Hybrid positioning with CSS variables and max()]() Original publisher: [Read original article]() Author: Lea Verou Published: 2020-06-05T00:00:00Z Content type: tutorial Language: en Sources: [Lea Verou's blog]() Topics: [CSS](), [Web Development](), [JavaScript]() Tags: [blog](), [css](), [css-values](), [css-variables](), [javascript](), [js](), [tips](), [tutorials]() ### AI overview A tutorial explains how to combine CSS variables, JavaScript, and the max() function to create navigation that behaves like absolute positioning initially and fixed positioning after the header leaves the viewport. ### Source excerpt Notice how the navigation on the left behaves wrt scrolling: It's like absolute at first that becomes fixed once the header scrolls out of the viewport. One of my side projects these days is a color space agnostic color conversion & manipulation library, which I'm developing together with my husband, Chris Lilley (you can see a sneak peek of its docs above). He brings his color science expertise to the table, and I bring my JS & API design experience, so it's a great match and I'm really excited about it! (if you're serious about color and you're building a tool or demo that would benefit from it contact me, we need as much early feedback on the API as we can get! ) For the documentation, I wanted to have the page navigation on the side (when there is enough space), right under the header when scrolled all the way to the top, but I wanted it to scroll with the page (as if it was absolutely positioned) until the header is out of view, and then stay at the top for the rest of the scrolling (as if it used fixed positioning). It sounds very much like a case for position: sticky, doesn't it? However, an element with position: sticky behaves like it's relatively positioned when it's in view and like it's using position: fixed when its scrolled out of view but its container is still in view. What I wanted here was different. I basically wanted position: absolute while the header was in view and position: fixed after. Yes, there are ways I could have contorted position: sticky to do what I wanted, but was there another solution? In the past, we'd just go straight to JS, slap position: absolute on our element, calculate the offset in a scroll event listener and set a top CSS property on our element. However, this is flimsy and violates separation of concerns, as we now need to modify Javascript to change styling. Pass! What if instead we had access to the scroll offset in CSS? Would that be sufficient to solve our use case? Let's find out! As I pointed out in my Increment ar ## CSS Variables for React Devs DevFeed: [CSS Variables for React Devs]() Original publisher: [Read original article]() Author: Josh W. Comeau Published: 2020-04-13T13:15:00Z Content type: tutorial Language: en Sources: [Josh Comeau's blog]() Topics: [CSS](), [Tutorial](), [Open Props](), [React](), [modern web development](), [styled-components](), [Web Development](), [Media Queries]() Tags: [css](), [css-in-js](), [css-variables](), [front-end](), [javascript](), [media-queries](), [react](), [styled-components](), [tutorial]() ### AI overview A tutorial for React developers on using CSS Custom Properties to improve styling workflows and create dynamic themes. It explains how CSS variables work, including inheritance, scoping, global definitions, and their use alongside CSS-in-JS tools. ### Source excerpt CSS variables are *really* cool, and they're incredibly powerful when it comes to React! This tutorial shows how we can use them with React to create dynamic themes. We'll see how to get the most out of CSS-in-JS tools like styled-components, and how our mental frame around media queries has been wrong all along. ## Animating CSS Gradients with CSS Houdini, CSS Variables, and React DevFeed: [Animating CSS Gradients with CSS Houdini, CSS Variables, and React]() Original publisher: [Read original article]() Author: Josh W. Comeau Published: 2020-01-13T13:00:00Z Content type: tutorial Language: en Sources: [Josh Comeau's blog]() Topics: [CSS](), [Tutorial](), [React](), [modern web development](), [Web Development]() Tags: [animate](), [animation](), [css](), [css-variables](), [gradient](), [react]() ### AI overview A tutorial on creating an animated rainbow button with CSS gradients, CSS Houdini, CSS variables, and React. It explains how shifting gradient colors can create a flowing animation effect without moving the gradient across the button. ### Source excerpt If you've ever tried to animate a gradient, you've been met with a harsh reality--it isn't possible. At least, it wasn't! In this tutorial, we'll leverage bleeding-edge browser features to animate ANY CSS property, including background gradients, using CSS Houdini, CSS variables, and React. ## CSS Variables With Inline Styles DevFeed: [CSS Variables With Inline Styles]() Original publisher: [Read original article]() Author: Ahmad Shadeed Published: 2019-11-04T00:00:00Z Content type: tutorial Language: en Sources: [Ahmad Shadeed]() Topics: [CSS](), [layout](), [modern web development](), [Web Development]() Tags: [code](), [css](), [css-grid](), [css-variables](), [custom-properties](), [grid-layout]() ### AI overview A tutorial on using CSS Variables, including inline styles and fallback values, to create flexible CSS Grid layouts for sidebars, forms, and dynamic grid items. ### Source excerpt While working on a demo for an article, I needed an easy way to create a grid layout. For example, laying out a grid of five columns without touching CSS every time I change my mind. Throughout this article, I will explore some use cases and think out loud with you on how to do them. How It Works Before diving into the concept, let me explain CSS Variables basics. You might know them as Custom Properties as well. CSS Variables are supported natively in all major browsers. ## Implementing Dark Mode For My Website DevFeed: [Implementing Dark Mode For My Website]() Original publisher: [Read original article]() Author: Ahmad Shadeed Published: 2019-10-22T00:00:00Z Content type: tutorial Language: en Sources: [Ahmad Shadeed]() Topics: [Dark Mode](), [Web Development](), [CSS](), [modern web development](), [Website](), [color](), [layout](), [iOS]() Tags: [apple](), [article](), [blog](), [colors](), [css](), [css-gradients](), [css-variables](), [dark-mode](), [dark-theme](), [implementing](), [ios](), [layout](), [layouts](), [ui](), [user](), [website]() ### AI overview A practical guide to implementing dark mode for a website. It covers detecting the user's preferred color scheme with a media query, using CSS variables, choosing suitable dark colors, and adjusting page elements and backgrounds. ### Source excerpt I might be late to the game, but I decided to make a dark color version of my website. It becomes necessary now as Apple recently added this feature natively to iOS 13. More users will expect dark layouts over time. In this article, I'll show you how I worked on the dark color version of ishadeed.com, my blog. The article includes methods and considerations to keep in mind when building such a thing. I tried to include everything I know. ## Autoprefixing, with CSS variables! DevFeed: [Autoprefixing, with CSS variables!]() Original publisher: [Read original article]() Author: Lea Verou Published: 2016-09-07T00:00:00Z Content type: tutorial Language: en Sources: [Lea Verou's blog]() Topics: [CSS](), [Web Development](), [browsers]() Tags: [blog](), [browser-support](), [clip-path](), [css](), [css-variables](), [edge](), [original](), [tips]() ### AI overview This tutorial presents a CSS custom-property technique for applying the same value to prefixed and unprefixed properties, using clip-path and -webkit-clip-path as the example. It also explains the technique's browser-support limitation and notes that Edge support for CSS variables was still in progress. ### Source excerpt Recently, when I was making the minisite for markapp.io, I realized a neat trick one can do with CSS variables, precisely due to their dynamic nature. Let's say you want to use a property that has multiple versions: an unprefixed one and one or more prefixed ones. In this example we are going to use clip-path, which currently needs both an unprefixed version and a -webkit- prefixed one, however the technique works for any property and any number of prefixes or different property names, as long as the value is the same across all variations of the property name. The first part is to define a --clip-path property on every element with a value of initial. This prevents the property from being inherited every time it's used, and since the * has zero specificity, any declaration that uses --clip-path can override it. Then you define all variations of the property name with var(--clip-path) as their value: * { --clip-path: initial; -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); } Then, every time we need clip-path, we use --clip-path instead and it just works: header { --clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 2.5em), 0% 100%); } Even !important should work, because it affects the cascading of CSS variables. Furthermore, if for some reason you want to explicitly set -webkit-clip-path, you can do that too, again because * has zero specificity. The main downside to this is that it limits browser support to the intersection of the support for the feature you are using and support for CSS Variables. However, all browsers except Edge support CSS variables, and Edge is working on it. I can't see any other downsides to it (except having to use a different property name obvs), but if you do, let me know in the comments! I think there's still a lot to be discovered about cool uses of CSS variables. I wonder if there exists a variation of this technique to produce custom longhands, e.g. breaking box-shadow into --box-shadow-x, --box-shadow-y etc, but