Skip to content
EN

Back to the catalog

12daysofweb.dev
atomEnglish

12 Days of Web

12daysofweb.dev · English

A year-end celebration of fundamental web technologies: HTML, CSS, and JavaScript.

atom

Open the feed

https://12daysofweb.dev/feed.xml

Last post
Jan 13, 2025
Posts in 24 h · 7 days · 30 days
0 · 0 · 0
Our last check
Answering
Served from
Brazil
Format
atom

Posts

What our queue read from this feed. Open one to read it here, or go to the site that published it.

  1. CSS margin-trim and line height units
    Dec 24, 2024 · original
    It’s been possible to create gorgeous layouts on the web for decades, but often, refining the details to perfection can take a lot of effort. Arguably too much effort, and developers just don’t have the time. Happily, the last few years of CSS have seen a lot of new tools, sometimes very simple tools, that when used in a smart fashion suddenly make polishing graphic design details incredibly easy. In this article, I’ll show you two such tools. Line height units # Gaining a new unit that represents the line height might seem like no big deal. Support shipped in every browser in 2023 without much fanfare. But wow, are they powerful. Basically, 1lh equals the height of one line of text for the current font at the current line height. “LH” stands for Line Height. The accompanying 1rlh unit is the equivalent of one line height at the root, just like how rem is the em at the root. “RLH” stands
  2. How to Use Baseline Data
    Dec 23, 2024 · original
    I’m one of the leads of the Baseline initiative that was started by a team at Google Chrome and is now defined by the Web DX Community Group . The idea behind Baseline is to make it easier for developers to understand what’s available to use across browsers in a web platform that is changing at a faster rate than ever before. In this post, I will answer the question I’m most often asked, “why doesn’t Baseline consider polyfills or progressive enhancement?” but also demonstrate how Baseline can make the decisions about using polyfills and progressive enhancement much easier. Why not include polyfills in Baseline? # A small group within Chrome thought about the idea that became Baseline for almost two years before an announcement was made. We spent a lot of time looking at research and what developers were actually doing and telling us. We tried to work out the best way to solve this const
  3. BroadcastChannel API
    Dec 22, 2024 · original
    State syncing can be tricky to accomplish with web apps, but it's one of the scenarios improved by using the BroadcastChannel API. This native web API allows messaging between browsing contexts from the same origin. In other words, if a user has multiple tabs, windows, and even an iframe open from santas-list.tld, use of this API can push messages between all of those contexts. How you handle those messages enables state syncing or other actions. Sending and Receiving Broadcast Messages # We're going to create a simple app for Santa and his elves to track children's naughty or nice status. The first step is to set up a broadcast channel. You can name this whatever fits the purpose of your app, and depending on your needs, you can have one channel or multiple. const santasList = new BroadcastChannel ( "santasList" ) ; Next, we can send our first message using the API's postMessage method.
  4. CSS light-dark()
    Dec 21, 2024 · original
    light-dark() makes it easy to build websites that respect the user's preferred color scheme while also providing the ability to override the color scheme without code duplication. Be sure to check out the demo at the bottom! Before we dive into light-dark() , let's take a quick detour to understand color-scheme . Color scheme # Browsers have a built-in "color scheme" mechanism, which can be specified using the color-scheme CSS property or the corresponding meta tag . The color-scheme can be set to either "light" or "dark" to indicate which mode the page supports. It can also be set to a space-separated "light dark" value, which indicates that the page supports both modes. Typically, you would set this on the html element so that it gets inherited by everything on the page. html { color-scheme : light dark ; } This is kinda like saying, "Hey browser, this page supports both light and dark
  5. JS Import Maps
    Dec 20, 2024 · original
    Introduction # Just as holiday shopping requires careful planning and organization, managing JavaScript dependencies in web applications demands thoughtful coordination. Traditionally, web developers have relied on bundlers like webpack or browserify to handle bare module imports. But what if we could easily manage our dependencies? Enter Import Maps, a native browser specification that lets you control JavaScript module loading without the need for bundling tools. Understanding Import Maps # The Problem with Bare Imports # When we write modern JavaScript, we often use bare import statements like: import { Snowflake } from "winter-animations" ; Without build tools, browsers can't resolve these bare module specifiers - they need complete URLs. It's like trying to deliver presents without knowing the full address! How Import Maps Help # Import Maps tell browsers exactly where to find these
  6. CSS box-decoration-break
    Dec 19, 2024 · original
    box-decoration-break is a CSS property that lets you decide what the decorations of a box should do if that box is broken across multiple lines. Now that sentence probably means nothing if you don't already know what box-decoration-break does, so let's back up a whole bunch of steps and figure out why this is something that needs to be decided on. What is a box? # Let's start with the first part: boxes. In CSS, everything is a box. Every element in your DOM is a box, every pseudo-element you add in CSS is a box, and even every text node is a box. In other words, the entire web page is made up of rectangles. There are different types of rectangles, but for box decoration-break , there are two types we need to know about: block boxes and inline boxes. In CSS, elements can either be "block" or "inline." Example of a block element .block-el { text-align : center ; aspect-ratio : 1/1 ; max-bl
  7. Declarative Shadow DOM
    Dec 18, 2024 · original
    What we are able to build using the web platform has gone into overdrive, especially in the last two years. Most of the action has been in the areas of CSS and JavaScript, but there have also been some important additions to HTML. However, one piece of the puzzle has proven to be elusive: the ability to build reusable and isolated components. But wait, what about web components? I hear you ask, and you would be correct. With the HTML template element, custom elements, and the shadow DOM finally getting widespread adoption in user agents, we can build components that satisfy most of our needs. The Problem # Leaving the complaints about the general developer experience when writing web components aside for the moment, there is one rather striking challenge that still has most web developers reaching for a framework: server-side rendering and/or static site generation. There are multiple re
  8. CSS content-visibility
    Dec 17, 2024 · original
    Newly available in Baseline 2024 is the content-visibility CSS property and as its name implies, it controls the visibility of an element’s content. What makes this property different than selecting all of an element’s children and setting a rule for them like display: none or visibility: hidden is that content-visibility applies to all of an element’s content — including text nodes and pseudo-content — not just child elements. In the following demo, the visibility of the content is different due to the use of display: none versus content-visibility:hidden . Validate what's happening by inspecting with browser dev tools. Comparison of using content-visibility .display-none * { display : none ; } .content-hidden { content-visibility : hidden ; } This element is hidden. This is the only visible text because its a text node inside of display: none This element is hidden. This text is also h
  9. CSS text-wrap
    Dec 16, 2024 · original
    In print typography, a lot of attention is paid to line-breaking and text wrapping (among many other things). In web typography, where we have no guarantee of line length, display area, or even font face, we’ve traditionally either ignored those things or hacked like mad scientists. It’s all part of the Dao of web design, even if that does sometimes mean weirdly balanced text or hanging single words ( known as “runts” , at least sometimes). But now, thanks to the shorthand property text-wrap — I’ll break it apart into the longhand properties later — we can exert… well, some influence. Plus we can do things that we used to rely on white-space to do. For example, we can prevent text wrapping! Figure 1. Text wrapping normally, and not wrapping at all. nowrap , as its name implies, prevents line-wrapping. You can still use white-space: nowrap if that’s what your fingers’ muscle memory has pr
  10. HTML inert Attribute
    Dec 15, 2024 · original
    While an element and its descendants with inert are removed from the DOM, they will still be visible! Inert is meant to be applied to obscured elements that should not receive interaction events. This is especially helpful if you want to "trap" focus to a particular part of your website. Be aware that it is not the same as display: none and visibility: hidden , though, which makes elements disappear visually. Explanation # According to the HTML specs , this is what inert does: The inert attribute is a boolean attribute that indicates, by its presence, that the element and all its flat tree descendants which don’t otherwise escape inertness (such as modal dialogs) are to be made inert by the user agent. Translated into human language: An HTML element with the inert attribute becomes inactive , including all the (interactive) elements inside that element. They also go a bit more into detai
  11. Animating Entry Effects
    Dec 14, 2024 · original
    Animation is a critical component of interactive storytelling. An animation creates a journey, no matter how small, from point A to point B. In classical animation, an artist draws one frame at a time, and a camera snaps a snapshot of each progression. For just one second of animation, 24 frames need to be drawn, captured, and sequenced. For interactive content such as video games, web apps, and operating systems, players, visitors, and customers expect a stable 60 frames per second. Anything less than 60 individual images per second is perceptible to people with an eye tuned for it. CSS Animations # With CSS, there are two primary properties used for animation: transition and animation . Both properties allow customization based on how long the animation should last (duration), when it should start (delay), and how the in-between frames should be "tweened" (easing). Today, we will focus
  12. calc-size() and interpolate size
    Dec 13, 2024 · original
    Animating to or from height: auto has been something front-end developers have had on their wishlist for a very long time, and now, not only can we do that very easily, but there are new possibilities that have opened up on top of that as well, all thanks to two new CSS features: The interpolate-size property The calc-size() value function As of the time of writing, interpolate-size and calc-size are both only supported by Chrome and Edge. There are a lot of CodePen examples for you to see things in action, but I’ve also included videos in case you are using a different browser (do note that they have low fps). All you need is one line of CSS # The new interpolate-size property enables animating to intrinsic sizes, such as auto . Here’s a simple example of it in action: We go from block-size: 1lh to block-size: auto . See the CodePen . Enabling it site-wide with a single declaration # Th
  13. Container Style Queries
    Dec 24, 2023 · original
    One of the most requested features in CSS was container queries , the ability to query the size of a parent container. Before container queries, you could only query the size of the viewport. That worked well and still does, allowing you to create responsive websites, but it's really just a compromise because, in most cases, we're interested in the size of our parent container, not the size of the viewport. That’s why container queries are such a critical addition to CSS. For a general introduction to container queries, please visit Stephanie's post since this post assumes that you already know the basics. In this example, when the .cards container reaches a minimum width of 60rem , set the flex-grow value of each .card within the container to 1 . .cards { container-type : inline-size ; display : flex ; } @container ( inline-size 60rem ) { .card { flex-grow : 1 ; } } I find container sty
  14. Responsive SVGs
    Dec 23, 2023 · original
    SVG can be a tricky subject. If you're a developer, you might need to have an interest in design to really dive into SVGs. And if you're a designer, you'll need to know a bit about coding to do more than just export files from design tools like Figma. This might be why we rarely see custom-made responsive SVGs, even though they are incredibly useful and versatile. In this post, I’ll guide you through the basics of creating a responsive SVG. I was reminded of the potential of responsive SVGs when I looked at the Threads App. In the app, there's an interesting design element where a little swirl line connects the avatar of a reply to the original message's avatar. This design is achieved using three separate SVGs, with the length of the longest part calculated by JavaScript that is triggered on page load and every time the window is resized. While this is an effective approach, it relies h
  15. FileReader API
    Dec 22, 2023 · original
    Ever wonder how websites claim to interpret an uploaded file without storing any of your data? Admittedly, I used to be a bit skeptical myself. Enter the FileReader API! It allows a client-side application to asynchronously read and interpret an uploaded file. In order to do this in your own client-side application, you'll also want to learn about the File API and/or the Blob API. These are the objects that you'll read with the FileReader API. You can also use the FileReader API to analyze files from a drag-and-drop operation. Note: This isn't to be confused with the much newer File System API, which provides the browser (and client-side JavaScript) access to your local file system. Although this API has been around for a while (Chrome started supporting it in version 6), parts of the modern usage haven't been supported as long, such as the File API (shipped in Chrome 13) and the File()
  16. Scroll-driven Animations
    Dec 21, 2023 · original
    One thing many fancy, award-winning websites have in common is they contain animations triggered by scrolling. Whether it’s a parallax effect, a progress bar animation, elements animating into view, or a full scrollytelling experience, on-scroll effects celebrate the medium of the web, clearly differentiating it from print. Indicating the progress of scroll can also be helpful to users. Up until now, JavaScript has been a requirement for building scroll-driven animations. But the new Scroll-driven Animations specification enables us to link the progress of an animation to the progress of scroll, all with just CSS. It’s a Christmas miracle! Please be aware scroll-driven animations are only supported in Chromium, or with a flag enabled in Firefox at the time of writing. To get the most out of this article, you’ll need to use a supporting browser. Simple use: Animated progress indicator # A
  17. CSS Nesting
    Dec 20, 2023 · original
    CSS Nesting is a new syntax for CSS that lets you nest selectors inside of other selectors, where every nested selector is relative to their parent. In its simplest form, it looks like this: .card { border : 2px solid red ; padding : 1rem ; .card-title { font-family : Jolly ; font-size : 3rem ; } } A browser will take the style for an element with the class card-title and apply it only if that element is nested inside an element with the class card . In other words, a browser will interpret it like this: .card { border : 2px solid red ; padding : 1rem ; } .card .card-title { font-family : Jolly ; font-size : 3rem ; } Benefits of Native CSS Nesting # Now some relevant implementation details complicate things that we'll get to later (this is the web, after all!), but this example is enough to go over the benefits that CSS nesting brings: Less typing # In the "interpreted" version above, yo
  18. View Transitions
    Dec 19, 2023 · original
    Web applications these days are becoming more complex thus, having smooth transitions between view states as a form of functional animation has the practical benefit of reducing cognitive load, preventing change blindness, and establishing better recall in spatial relationships. Trying to animate between different DOM states used to involve a serious amount of Javascript and CSS because of the number of factors we had to take care of. In addition to the animations themselves, we also had to worry about handling the loading and rendering of content within the different states and potential accessibility issues. The View Transitions API was proposed in the CSS working group back in 2021 to allow transition animations when navigating between different application views. A lot of work has gone into this, and the specification is now at Candidate Recommendation status. How does it work? # Gen
  19. New JS Array Methods
    Dec 18, 2023 · original
    Let’s learn what these Array methods do and how they work! Creating a reversed copy with the Array.prototype.toReversed() method # Let's say you have an array of wizards. let wizards = [ 'Merlin' , 'Ursula' , 'Gandalf' ] ; The Array.prototype.reverse() method modifies the original array. wizards . reverse ( ) ; // logs ["Gandalf", "Ursula", "Merlin"] console . log ( wizards ) ; Historically, if you wanted to create a reversed copy of the array instead of modifying the original, you would have to clone it first, then reverse it. let reverseWizards = Array . from ( wizards ) . reverse ( ) ; // logs ["Gandalf", "Ursula", "Merlin"] console . log ( reverseWizards ) ; // logs ["Merlin", "Ursula", "Gandalf"] console . log ( wizards ) ; The new Array.prototype.toReversed() method simplifies that into a single step. let reverseWizards = wizards . toReversed ( ) ; // logs ["Gandalf", "Ursula", "Me
  20. CSS animation-composition
    Dec 17, 2023 · original
    MDN describes animation-composition as: The animation-composition CSS property specifies the composite operation to use when multiple animations affect the same property simultaneously. Put another way, it gives us the ability to instruct animations to apply property values in ways other than the default behavior. It’s not limited to multiple animations. Animation composition affects all animated properties regardless of whether an element has one or multiple animations applied to it. There are three possible values for animation-composition : replace , add , and accumulate , where replace is the default. replace : The effect value overrides the underlying value of the property add : The effect value builds on the underlying value of the property accumulate : The effect and underlying values are combined You apply animation-composition to the same element that has an animation. .single-a

Discovered by the rss-feed-index crawler, which checks each feed at most once a month.

Same record as JSON: https://api.agentalog.com/api/feeds/fd_12daysofweb_dev_934201585d054a82. More from this site: 12daysofweb.dev in the Feeds tab.