Search for a command to run...
Articles tagged with #css
Shadow DOM is often thought of as the one and only way to create scoped styles for a Web Component. It's not. Prefixed Tags Scope Styles Web Components, i.e. Custom Elements, require a prefixed tag. For example, a "foo" Custom Element would be define...
The CSS :has pseudo-class enables squeaky clean markup for group components, like a button group. Mdash recently shipped its button group using :has and the OCD within me ranks the markup 5 out of 5: <div role="group"> <button ord="secondary" aria-...
In the past, using shadow DOM meant compromising good CSS maintenance. This is no longer true. First, a quick introduction to shadow DOM, then we'll learn the eight ways you can style it. Brief Shadow DOM Intro HTML becomes DOM. See this W3Schools in...
The smaller the file, the faster the download. The faster the download, the sooner the browser can evaluate. The sooner evaluation finishes, the better the user experience. The following five techniques will help make your stylesheets smaller. The fi...
I've seen many design systems bend over backward to ensure styles don't leak in or out of components. Such efforts and limitations are unnecessary and are a misunderstanding of the expectations for design systems. UI Elements Do Not Live In a Vacuum ...
There are many ways to create icons for websites. After this summary of web icon history, I will show you The Way. (But seriously, the way you do icons is about to change). In the beginning, icons on the web were small individual JPEGs or single JPEG...
