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...
Javascript provides a way to shortcircuit if/else statements with the conditional or ternary operatorhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditionaloperator. the idea is that we consolidate the three parts of the if statement in one command, like shown below: js function canPassisAdult { return isAdult ? 'Yes, can pass' : 'No, cannot pass'; } In this example, isAdult is the test we want to execute. The string after the question make ? returns if the test is true and the secod string after the colon : returns if the test is false. if the true and false statemnts are too complex or too long, we should...
I came accross reset from Harry Roberts from Twitter/Xhttps://twitter.com/csswizardry/status/1717841334462005661 via Kevin Powell's YouTube videohttps://www.youtube.com/watch?v=345V2MU3Ew. I've adapted the reset by eliminating the low quality image resource. I don't need the low quality images at least I don't think I do. The initial image styles look like this: css img { max-width: 100%; / 1 / height: auto; / 1 / vertical-align: middle; / 2 / font-style: italic; / 3 / font-size: .75rem; / 4 / } Each line performs a specific task: 1. Allow for fluid image sizing while maintaining the image aspect ratio 2. Remove ‘phantom’ whitespace. Softer way to...
