はてなブックマーク

Modern CSS For Dynamic Component-Based Architecture Updated on: Jan 19, 2024 Written by Stephanie Eckles The language of CSS has had an explosion of new features and improvements in the last few years. As a result, feature parity between browsers is at an all-time high, and efforts are being made to continue releasing features consistently and synchronously among evergreen browsers. Today, we will

Testing Feature Support for Modern CSS Posted on: May 1, 2023 Written by Stephanie Eckles The pace of the CSS language can be challenging to keep up with! Browsers release features and fixes monthly, and the CSS Working Group is constantly working on specifications. So, how do you know using a new feature is "safe" to use? And what are the considerations around making that choice? Let's review how

Container Query Units and Fluid Typography Updated on: Jun 4, 2023 Written by Stephanie Eckles Fluid typography is the term for designing font-size rules that responsively adapt the size based on the amount of available inline space. Before the availability of container query units, techniques usually relied on the viewport width - vw - unit. The viewport method is excellent for main page type, su

Practical Uses of CSS Math Functions: calc, clamp, min, max Posted on: Aug 15, 2021 Written by Stephanie Eckles There are currently four well-supported math functions in CSS. I've found each of them to be extremely useful in my daily work. These CSS functions can be used in perhaps unexpected ways, such as within gradients and color functions and in combination with CSS custom properties. We'll le

Modern CSS Upgrades To Improve Accessibility Posted on: Apr 9, 2021 Written by Stephanie Eckles Accessibility is a critical skill for developers doing work at any point in the stack. For front-end tasks, modern CSS provides capabilities we can leverage to make layouts more accessibly inclusive for users of all abilities across any device. This post will cover a range of topics: Focus Visibility Fo

Pure CSS Custom Styled Radio Buttons Updated on: Oct 24, 2021 Written by Stephanie Eckles Using a combination of the following properties, we can create custom, accessible, cross-browser, theme-able, scalable radio buttons in pure CSS: currentColor for theme-ability em units for relative sizing appearance: none for full restyling access CSS grid layout to align the input and label Head's up: A lot

Pure CSS Custom Checkbox Style Updated on: Oct 24, 2021 Written by Stephanie Eckles We'll create custom, cross-browser, theme-able, scalable checkboxes in pure CSS with the following: currentColor and CSS custom properties for theme-ability em units for relative sizing use of pseudo elements for the :checked indicator CSS grid layout to align the input and label Many of the concepts here overlap w

Providing Type Definitions for CSS with @property Write safer CSS using `@property`, which enables defining types for custom properties. Learn why traditional fallback values can fail, and how `@property` features improve the resilience of custom property definitions. 12 Modern CSS One-Line Upgrades Sometimes, improving your application CSS just takes a one-line upgrade or enhancement! Learn about