What are absolute units? What are the differences between relative and absolute units, and how do we create accurate sizes on the web? It’s important to note that there are still significant differences between relative and absolute units. CSS relative units are sized according to other style definitions defined by parent elements or are affected by the size of a parent container. As for absolute units, we will dive in and see how they are affected by other things, such as the screen and the device’s operating system. In this article, Elad Shechter explains why CSS absolute units aren’t so absolute.
Read more…
In this three-part series, Adrian Bece is going to go through the CSS refactor process from the beginning to the end, starting with knowledge on how to approach it and some general pros and cons of refactoring, then moving onto the refactoring strategies themselves and ending with some general best practices on CSS file size and performance. CSS refactoring is not an easy task — it needs to be done in a way that doesn’t create problems. First we need to analyze the existing codebase, audit CSS codebase health, discover weaknesses, agree on the approach, and convince management to invest time and resources into the process.
Read more…
HSL colors are very powerful when we use them the right way. They can save us time and effort and even help us to explore options for how to apply color to design. In this article, Ahmad Shadeed explains what HSL is, how to use it, and shares some of the useful use-cases and examples that you can use right away in your current projects.
Read more…
Image placement on the modern web is highly intentional, helping to communicate the overall purpose of a page or view. This means that nearly every image you declare needs to have an alternate description. Nulling an image indicates that it is for decorative purposes only. In this context, decorative means that the image does not visually communicate information that is important to understanding the purpose of the page or view, and why the image is included as a part of that.
Read more…
Spoiler alert: tooltips, modals, tabs, carousels, and dropdown menus are some of the user interface components that require more than CSS. To ensure accessibility of your interface, JavaScript is a necessary addition to accomplish focus management, respond to keyboard events, and toggle ARIA attributes.
Read more…
What makes relational selector one of the most requested features and how are we, as developers, working around not having it? In this article, we’re going to check the early spec of the :has selector, and see how it should improve the CSS workflow once it’s released.
Read more…
Google’s Core Web Vitals initiative has taken the SEO and Web Performance worlds by storm and many sites are busy optimizing their Page Experience to maximize the ranking factor. The Cumulative Layout Shift metric is causing trouble to a lot of sites, so let’s have a look at ways of addressing any issues for that metric.
Read more…
Web fonts are often terrible for web performance and none of the font loading strategies are particularly effective to address that. If you want to use web fonts your choices are basically Flash of Invisible Text (aka FOIT) or Flash of Unstyled Text (FOUT). Neither option has really “won out” because neither is really satisfactory, to be honest. Upcoming font options may finally deliver on the promise of making it easier to align fallback fonts to the final fonts.
Read more…
CSS Container queries bring media queries closer to the target elements themselves and enables them to adapt to virtually any given container or layout. In this article, Adrian Bece is going to cover CSS container query basics and how to use them today with progressive enhancement or polyfills.
Read more…
