Now that relative colors are supported across browsers it's time to revisit the syntax and see what we can do with it and how it changes what we can natively do with colors. Basic Syntax The most basic syntax for relative colors has the following shape: 1. The color space you want to work on, in the example: OKLCH 2. The color that we want to work from, using the from keyword and the color that we want to use, in this case, 663399 3. The channels for the target format, in this case, l for lightness, c for chrome,...
A complementary API to Popovers is the anchor positioning APIhttps://developer.chrome.com/blog/anchor-positioning-api Where the popover attribute controls the popover behavior, the anchor positioning allows us to control where will the popover appear. We've already covered popovers so this post will look at the anchor positioning API and how it interacts with popovers. Non-popover The most basic use of the anchor is to place content positioned relative to the anchor point. These anchor points can be any HTML element. In the example below, we use an anchor use a div element as the anchor and a second div as the content to be...
Ever since we've had responsive images we've been able to add media queries to control the conditions that will trigger a match for a specific child element. But we haven't been able to do the same thing with videos. We have to make a good guess and hope that the videos we send down the wire are small enough that they won't slow down user experiences on mobile or consume large chunks of a user's data plan. The first example uses two source elements: The first one will match windows smaller than 599px The second one will match otherwise and...
Duotone is a graphic design technique that makes for contrasting graphics that can be combined with text and other CSS effects. This post will look at what are duotone colors and how to create duotone colors in CSS to use with images. How To Create Duotone Colors in CSS? The CSS portion of the process consists of three layers: A base layer layer1 with a background image grayscale and brightness CSS filters Two 2 layers layer2 and layer3 Each with a background color and mix-blend-modehttps://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode to blend the layer with the other layers css .layer { position: absolute; width: 100%;...
If you use web.dev or MDN, you may have seen blocks indicating baseline availability like those in Figures 1 and 2. !Baseline message as shown on web.devhttps://res.cloudinary.com/dfh6ihzvj/image/upload/v1717014095/webdev-baselinev0be1b.png !Baseline message as it appears on MDNhttps://res.cloudinary.com/dfh6ihzvj/image/upload/v1717014095/mdn-baselineolvxqk.png So what does this mean? Web Platform Baseline baseline provides clear information about browser support for web platform features. It gives developers clear information about which web platform features are ready to use in your projects today. The core browsers used to determine baseline support are: Chrome desktop and Android Edge Firefox desktop and Android Safari macOS and iOS There are two stages of feature baseline...
Even after all these years, I've struggled to understand the difference between auto-fill and auto-fit values when used in creating grid layouts. The easiest way to create a grid of equal columns is to use the repeathttps://developer.mozilla.org/en-US/docs/Web/CSS/repeat function: css .grid { display: grid; grid-template-columns: repeat12, 1fr; } But this may cause each column to be smaller than we'd like it to be, especially on phones and other small form factor devices. To prevent this, we use the minmaxhttps://developer.mozilla.org/en-US/docs/Web/CSS/minmax function. Similar in intent to clamp, this function defines a size that is greater than or equal to the min value and...
Rather than using media queries to control the dimensions of an element, we can use the clamphttps://developer.mozilla.org/en-US/docs/Web/CSS/clamp to accomplish the same task with less code. According to MDN: > The clamp CSS function clamps a middle value within a range of values between a defined minimum bound and a maximum bound. The function takes three parameters: a minimum value, a preferred value, and a maximum allowed value. The first example uses CSS variables to establish the values for the default value scaler, min and max values. We then tell the browser to use 10vw as the value of the font...
There is an interesting discussion going on about masonry layouts and how they should be added to the web platform. This post will analyze the different proposals and then express an opinion as to which one I think would work best. Expressing the problem I'm not going deep into each proposal. You can read the posts and the current Grid Level 3 specification. It is important to understand the differences. In Help us invent CSS Grid Level 3, aka “Masonry” layouthttps://webkit.org/blog/15269/help-us-invent-masonry-layouts-for-css-grid-level-3/, Jen Simmons now from the Safari team presents their view of what masonry should look like and how it's...
This articlehttps://meiert.com/en/blog/april-24-is-js-naked-day/ made me think, again, about one of the eternal battles of the web: Graceful Degradation versus Progressive Enhancement but it also made me think about something new. I'm all for Graceful Degradation myself, but I also feel that both arguments miss the point. The post will, again, review the definitions of Progressive Enhancement and Graceful Degradation and will cover why I think we're all missing the point. Definitions The definitions for these terms haven't changed much over the years but it's important to bring them back to the front to have a context for the following section. Graceful...
There are times when we may want to style content differently based on whether the browser has enabled Javascript or not. This is different than using Javascript to detect whether a script has run or not, this technique will only change the UI where necessary. The technique The technique is simple: We use the @media at-rule with scripting as the property and one of the two valid values for the media query: enabled and none. When using scripting: enabled, we can use the technique to progressively enhance the UI by adding CSS to elements where appropriate. css @media scripting: enabled...
