When initially introduced, view transitions would only work with single-page applications. This is awesome but it doesn't work with regular web pages like what I normally work with. During I/O 2024, Bramus introduced extensions to the Page View API that would make them work across pages on the same origin. This will create more appealing transitions between pages in an application. How they work Note:"> Cross-document view transitions are limited to same-origin navigations only. Navigation is considered to be same-origin if the origin of both participating pages is the same. To have a cross-document view transition between two documents, both...
Accordions present an interesting way to display content using one or more detailshttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/details elements. There is a specific type of accordion that, until recently, was impossible to do without scripting, the exclusive accordion. This post will explain what's an exclusive accordion and how to polyfill the API to handle older browsers. What are exclusive accordions and how they work To achieve this on the web you can now a name attribute to details elements. When this attribute is used, all details elements with the same name value form a semantic group and will behave as an exclusive accordion. When you...
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...
