I know that it's unlikely people will disable Javascript on their browsers, but it is not impossible. We can notify the user of the lack of Javascript using the scripting media query. This example will tell users whether Javascript is enabled on their browser. It is made of two parts. The first part is the content that we want to display to the user. We'll hide it and reveal the appropriate value with CSS later. html You do not have scripting available. Your scripting is only enabled during the initial page load. Weird. You have scripting enabled! The CSS does...
I've written about web components a lot over the years but not recently. I think it's time to take a look at where we're at, and the newer technologies that have emerged under the web components umbrella. What are web components? Web Components is the umbrella term for a set of technologies custom elements, shadow DOM and HTML templates that make it easier to create custom elements for your pages and applications. A web component may look like this when used in a web document: html And they would behave the same way as built-in elements like video and audio....
There may be times when we may want to style elements that are not direct descendants of the elements that we want to style. In Select an Element Which Doesn't Descend From Another in CSShttps://chriskirknielsen.com/blog/select-an-element-which-doesnt-descend-from-another-in-css/ Chris Nielsen outlines a way to do this using articles and links as examples. This is a skeleton of the content. html ... Link If we want to select a a element that is not a direct descendant of an element with the class .archived, we might start with code like this: css :not.archived > a { background-color: hotpink; } But this will not work...
When writing CSS one of the most annoying and repeating tasks is having to customize the styles for the last element in a list or other repetitive components. I've lost track of how many times I've had to tweak code like the code shown below where we override the margin-block-end or margin-bottom property on the last child element to remove the padding or margin. css .child { margin-bottom: 2rem; border: 1px solid red; width: 50vw; padding-block: 1rem; padding-inline-start: 2rem; } .child:last-child { margin-block-end: 0; } It's tedious and, potentially, error-prone. I may forget to add it or the last-child element...
Measuring long tasks in our code js // Test for long tasks test'should capture long tasks on the page', async { page } => { // Function to capture long tasks async function captureLongTasksdurationThreshold { return page.evaluatethreshold => { return new Promiseresolve => { const longTasks = ; const observer = new PerformanceObserverlist => { for const entry of list.getEntries { if entry.duration > threshold { longTasks.pushentry; } } }; observer.observe{ entryTypes: 'longtask' }; // Assuming the long tasks will be captured within a certain time frame setTimeout => { observer.disconnect; resolvelongTasks; }, 5000; // Adjust the timeout as needed...
While building the new blog, I started thinking about testing front-end code again. In this post I will revisit Playwrighthttps://playwright.dev/ Test class, and look at the types of testing that we can do to ensure that the site works as intended. Why test front-end code? I get caught in a deceptively simple question: Why do we need to test the front-end? Because testing will help you catch errors that you don't see. I've had multiple instances where I thought I typed one thing and I had typed something completely different. Testing can also help you identify potential performance bottlenecks before...
The display property has been around for a long time but its definition has evolved over the years. > Formally, the display property sets an element's inner and outer display types. The outer type sets an element's participation in flow layouthttps://developer.mozilla.org/en-US/docs/Web/CSS/CSSflowlayout; the inner type sets the layout of children. > > Source: MDNhttps://developer.mozilla.org/en-US/docs/Web/CSS/display CSS 2 made a lot of implicit assumptions when dealing with the display property. We can keep using them or we can adopt the more explicit behavior from the CSS Display Module Level 3https://drafts.csswg.org/css-display/ draft specification where you can use values for both inside and outside display...
One thing I particularly like about variable fonts is that it allows some interesting animation tricks. For example, since variable fonts have information about all possible variations of the font, we can animate discreete values, like weight or italics. There are two things we can do with font animations. We can use native CSS to animate changes to the full word or phrase that we want to animate We can use a library like Splittinghttps://splitting.js.org/ to break the content into letters or words and then animate each unit of content individually Animating blocks of text The easiest thing to do...
In addition to black and white or single, solid-color text, we can also use gradients to color the text. The process is slightly more complicated than just assigning color to the desired element. 1. Check if the browser supports background-clip and color conversion syntax for linear-gradient 2. Set the color of the text to transparent so that it won't conflict with the background gradient 3. Set the gradient as the background 4. Set the background-cliphttps://developer.mozilla.org/en-US/docs/Web/CSS/background-clip property to text {.custom-ordered} css @supports background-clip: text and background: linear-gradientin oklch to right, A37, 595 { / 1 / .gradient-text { color: transparent; /...
Both Eric Meyer's Resethttps://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ and Normalize.csshttps://necolas.github.io/normalize.css/ are comprehensive solutions to provide a baseline for CSS development. Can I build a set of defaults that make sense for my projects on top of these resets? what shape would this set of defaults take? Ever since I decided to move this blog to Eleventy, I've been thinking about moving the CSS to use @CSS Layershttps://developer.mozilla.org/en-US/docs/Web/CSS/@layer. This would make it easier to organize the stylesheet. Getting started We'll use Normalize as our base layer and leverage the fact that you can import stylesheets directly to a layer Links and resources Introducing the CSS...
