In a previous posts, I discussed the basic of streams and how to use them,how to use them in service workers, and how to build custom streams. This post will cover an additional area of interest: Using Brotli compression in streams. Using Brotli compression The streams API supports GZIP and Deflate. There are other compression algorithms that are worth looking at, in particular Brotlihttps://en.wikipedia.org/wiki/Brotli. > Brotli is a lossless data compression algorithm developed by Google. It uses a combination of the general-purpose LZ77 lossless compression algorithm, Huffman coding and 2nd-order context modelling. Brotli is primarily used by web servers and...
Scopped CSS has been a hot topic in front-end development. It is designed to give you tighter control over your styles and how they interact with each other. The @scope at-rule The @scope root at-rule declares a scoping root and optional scoping limits associated with a set of style rules. Using the @scope at-rule we can specify: Rules that apply to all elements in the scope using the :scope seelector Rules that apply to specific elements in the scope that will override the default rules This example defines a scope of .card. All elements with a the class will be...
Performance is important. Performance will keep people coming back to your site. Performance is very hard to get right, specially for mobile devices. I'm particularly interested in seeing how my blog https://publishing-project.rivendellweb.nethttps://publishing-project.rivendellweb.net does in mobile. The first step is to check what the browser tells me: Running PageSpeed Insightshttps://pagespeed.web.dev/ will produce both mobile and desktop reports. What I find most interesting is the differences between mobile and desktop and between runs on different browsers. It also provides both the results of the Chrome User Experience CrUXhttps://developer.chrome.com/docs/crux/ for the site and the artificial results from Lighthouse. Unfortunately, there is no CrUX...
Since color-mixhttps://developer.mozilla.org/en-US/docs/Web/CSS/colorvalue/color-mix is now available in all browsers we can revisit what it is, how it works and one possible use in creating a customizable color palette. What is color-mix The color-mix function allows you to combine 2 colors, in a given color space, with the specified percentages of each color. The most basic usage uses only the color space and the two colors css .demo01 { background: color-mixin oklab, red, blue; } You can use percentage values to indicate how much of each color to apply to the mix. If you specify a percentage value, it will be subtracted...
The @layer at-rule manages CSS cascade layers, a way for authors to control specificity and order of appearance. This is important because those are two determining factors a browser considers when applying an element's style. Working with the cascade is one of the biggest pain points for developers so it would be awesome if we had a built-in way to manage it. To understand cascade layers, we need to understand origins as browsers use the term. When the browser composites styles, there are three primary origins: 1. User-Agent origin: The default styles applied by the browser 2. Author origin: The...
Thanks to Kevin Powell and his video for showing me how to do a trick that has always intrigued me. The idea is that we have a border color that fades to transparent or invisible. This will take two items: The border imagehttps://developer.mozilla.org/en-US/docs/Web/CSS/border-image property The linear gradienthttps://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient function Setup the HTML we will use looks like this html Item Title item content Item Title Item content Item Title item content We will also add some CSS to make make the row-based flex layout: css .row { display: flex; gap: 2em; justify-content: space-evenly; padding: 2em; } Creating the effect With all...
While I was researching gradients, I came across a couple of interesting features introduced in the CSS Color Level 4 specificationhttps://www.w3.org/TR/css-color-4/ You can specify the color you want the gradient to run on. This is called hue interpolation. The example below uses the OKLab color space in the conic gradient css .oklab01 { background: conic-gradient in oklab, red, orange, yellow, green, blue, indigo, violet ; } You can also specify how browsers interpolates the hues in a gradient The four possible values are: - shortest - longest - increasing - decreasing The Codepen below shows the different hue interpolation methods...
When gradients were first introduced we only had hex and rgb/rgba colors for monitors that only worked on the sRGB color space so the gradients would look the same in all monitors. With the introduction of the new color spaces in the CSS Color Level 4, and the way they work it is appropriate to ask the question: do all color spaces work the same with gradients Adam Argylehttps://twitter.com/argyleink created a comparison to test the look of linear gradients across the color spaces in the CSS Color level 4https://www.w3.org/TR/css-color-4/ and level 5https://www.w3.org/TR/css-color-5/ modules and supported by the underlying color.jshttps://colorjs.io library....
linear-gradient, radial-gradient, and conic-gradient don't automatically repeat color stops. However, there are functions taht do: - repeating-linear-gradient - repeating-radial-gradient - repeating-conic-gradient The size of the repeating gradient line or arc is the length between the first color stop value and the last color stop length value. If the first color stop just has a color and no color stop length, the value defaults to 0. If the last color stop has just a color and no color stop length, the value defaults to 100%. If you don't declare a value for either the first or last colors, the gradient line...
Conical gradients can do different things than linear gradients but, from my perspective, they are harder to work with or it may be I have a harder time reasoning through them. The conic gradients work with two or more colors and, at he most basic level work like linear gradients. Note that for these examples we've set a default border-radius of 50% so they'll appear in a circle. The first example shows the simplest conic gradient between two colors. Note how there is a third, purplish color at the bottom of the demo css .demo01 { background-image: conic-gradient red, blue...
