BroadcastChannel API | 12 Days of Web
Keep state in sync and communicate across same origin tabs with this native web API.| 12daysofweb.dev
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. | 12 Days of Web
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 ...| 12 Days of Web
Keep state in sync and communicate across same origin tabs with this native web API.| 12daysofweb.dev
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! | 12 Days of Web
Introduction| 12 Days of Web
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.| 12 Days of Web
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.| 12 Days of Web
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.| 12 Days of Web
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).| 12 Days of Web
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.| 12 Days of Web
Animation is a critical component of interactive storytelling. An animation creates a journey, no matter how small, from point A to point B. | 12 Days of Web
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:| 12 Days of Web
A year-end celebration of fundamental web technologies: HTML, CSS, and JavaScript.| 12daysofweb.dev
Exploring new ways of approaching CSS by querying custom properties and their values.| 12daysofweb.dev
Stretch your knowledge of working with SVGs for scalable, responsive experiences.| 12daysofweb.dev
Asynchronously read and interpret an uploaded file, no back-end server required.| 12daysofweb.dev
Finally, a native platform way to link any animation to the progress of scroll to create effects including parallax.| 12daysofweb.dev
With CSS Nesting native in browsers, the amount of CSS you need to write can be lowered drastically while making it easier to maintain and reason about.| 12daysofweb.dev
Animating DOM state changes no longer requires a mountain of code thanks to the new View Transitions API.| 12daysofweb.dev
This year, a handful of new Array methods became available in all modern browsers: toReversed(), toSplice(), toSorted(), and with().| 12daysofweb.dev
Use the CSS animation-composition property for advanced control over how values are applied during keyframe animations.| 12daysofweb.dev
Learn how to build custom HTML elements that manage their own lifecycle, state and behaviors, both with and without shadow DOM.| 12daysofweb.dev
The new `@scope` rule is here! It's a better way to keep our component styles contained – without relying on third-party tools or extreme naming conventions.| 12daysofweb.dev
Anchor Positioning is an incoming dynamic addition to enhance the capabilities of CSS positioning.| 12daysofweb.dev
A declarative way to display elements on top of page content.| 12daysofweb.dev
Get ready for this incoming CSS feature that will allow developing components that respond to their container's width and other properties.| 12daysofweb.dev
A year-end celebration of fundamental web technologies: HTML, CSS, and JavaScript.| 12daysofweb.dev
A year-end celebration of fundamental web technologies: HTML, CSS, and JavaScript.| 12daysofweb.dev
With subgrid coming to all engines very soon, it’s a great time to discover what this new feature of grid can do.| 12daysofweb.dev
Learn the ins and outs of `:has()` which is the new CSS relational selector for selecting parents, siblings, and other unique combinations.| 12daysofweb.dev
Learn how to define color palettes that are perceptually uniform using the new Oklch color space and the relative color syntax in CSS.| 12daysofweb.dev
Pointer events provide an API for unifying detecting interaction from various "pointers" including a mouse, pen/stylus, or touch.| 12daysofweb.dev
Tips, tricks and grab-n-go demos for elegant and well-orchestrated scroll experiences.| 12daysofweb.dev
Native dialogs became cross-browser as of March 2022. Review how to use and customize dialogs and about accessibility considerations.| 12daysofweb.dev
Don't let specificity force you into strict selector conventions. Cascade Layers allow us to manage specificity without resorting to naming hacks or the `!important` flag.| 12daysofweb.dev
The FormData API allows serializing form fields and provides methods to get, set, and update values.| 12daysofweb.dev
The working draft for image() proposes new features to enhance the capabilities of background-image declarations.| 12daysofweb.dev
Providing a native API for animated page and element transitions.| 12daysofweb.dev
Review newly available units to manage space within the large, small, and dynamic viewport spaces.| 12daysofweb.dev
Learn how to help users fill out forms more efficiently and accurately with autocomplete and virtual keyboard options.| 12daysofweb.dev
Learn how to listen to and respond to speech in your application using the Web Speech API.| 12daysofweb.dev
Review 4 types of CSS animation, from the best supported options to the most cutting-edge.| 12daysofweb.dev
Learn about the different image elements and CSS solutions, configuring their attributes, and various considerations for selecting which method to use.| 12daysofweb.dev
Some CSS media queries can detect user preferences. We'll review the two best-supported types for motion and color settings.| 12daysofweb.dev
Let's create a holiday card generator by learning how to get access to a user's webcam and compose a screenshot.| 12daysofweb.dev
CSS Houdini Paint API allows you to create your own custom 2D rendering that can be painted as an image in CSS.| 12daysofweb.dev
Review the audio element and overview some of what's possible with the audio API by building a custom audio player.| 12daysofweb.dev
Also known as "CSS variables," this nifty modern CSS feature enables incredible flexibility throughout your stylesheets.| 12daysofweb.dev
The details and summary pair of HTML elements provide a native disclosure pattern, no extra JavaScript required!| 12daysofweb.dev
Use the Intersection Observer Web API as a performant way to track where elements are in the viewport and other scrollable regions.| 12daysofweb.dev
A year-end celebration of fundamental web technologies: HTML, CSS, and JavaScript.| 12daysofweb.dev
Review (nearly) eleven exciting additions to CSS that became fully or nearly cross-browser in 2022!| 12daysofweb.dev
