There are times when you want to reset the CSS of an element as if it hadn't happened. I'm finding this problem when working with WordPress block themes: There are so many css custom properties that may affect a given element that it's hard to know which ones to override and whether using the Full Site Editor, or theme.json is the best way to do it. I came across Resetting Inherited CSS with “Revert”https://cloudfour.com/thinks/resetting-inherited-css-with-revert/ and a particular way to reset styles without having a full reset stylesheet like normalize.csshttps://necolas.github.io/normalize.css/ or Eric Meyer's Reset CSShttps://meyerweb.com/eric/tools/css/reset/ According to MDNhttps://developer.mozilla.org/en-US/docs/Web/CSS/revert: > The revert...
The @supportshttps://developer.mozilla.org/en-US/docs/Web/CSS/@supports at-rule allows us to test if something is supported in CSS. The version of @supports that we see most often is testing for a rule inside a selector. css @supports display: grid { / Styles for when grid is supported / } We also have three logical operators: and, or and not that enable more complex queries. We can use and to test for more than one property. For example, we can test for grid and subgrid support. css @supports display: grid and display: subgrid { / code goes here / } The or operator comes in handy...
When working with CSS technologies, we may be in situations where not all browsers support a given property and we need to code around this partial support for the feature we're testing. To me, this is particularly important when creating examples to publish as part of a blog post or as standalone examples in Codepen. The idea is as follows: 1. Add a message to the example HTML and style it appropriately 2. Check if the browser supports the feature 1. If it does, hide the message 2. If the feature is not supported then make sure the message is...
In the last post, we discussed logical attributes and how they depend on the vertical and horizontal directions of the text. In this post we'll look at the writing-mode CSS attribute and the direction HTML attributes with its companion :dir CSS pseudo class. Writing mode CSS writing modeshttps://developer.mozilla.org/en-US/docs/Web/CSS/CSSWritingModes specify the block flow direction and the direction in which inline content flows within a block container. Writing modes are tricky because they vary from language to language. The most common writing mode is "horizontal, left to right", expressed as horizontal-tb with the direction attribute set to ltr. In the case of...
When the web first came about, it was primarily in English and we didn't have to worry about laying out content for other languages. But now the web has become universal. Unicode covers most, if not all, languages and we can have content written in many languages other than English. Some of these languages are written from right to left, some are written top to bottom and some are written both top to bottom and left to right. This post will look at CSS logical propertieshttps://developer.mozilla.org/en-US/docs/Web/CSS/CSSLogicalProperties as a way to make styles less dependent on the actual direction of the...
I'm starting to look at creating web-based presentations again and looking at the alternatives. My two favorite presentation engines/frameworks are Reveal.jshttps://revealjs.com/ and Inspire.jshttps://inspirejs.org/. Both frameworks have the things I consider as the minimal requirements for web-based presentations: Speaker/presenter notes to provide additional information Markdown support for authoring content Syntax highlighting for code examples Incremental display of content One thing that Inspire.js does is provide a way to do live coding in a slide using Prism Livehttps://live.prismjs.com/. Having the ability to do live coding is awesome but it only works during a live presentation or when viewing a recording of the...
There are times when we need to number things that are not ordered list. The best example, from my experience, is numbering sections of content in the h1 element serving as the title for each section of content. The idea is to turn this heading: html This is the first chapter Into this text: text Chapter 1: This is the first chapter. Without adding additional markup to the document. The solution: Counters and generated content Just like we did in a previous post to add content for figure captions, we'll leverage generated content and counters to insert text into the...
When I was writing a previous post, I wanted to create custom properties in Javascript that I could use in CSS based on the result of running color.jshttps://colorjs.io/ to convert colors and then test if the browser supports a given colorspace. How does it work? This example, as posted in Using color.js as a bridge between color spaceshttps://publishing-project.rivendellweb.net/using-color-js-as-a-bridge-between-color-spaces/, takes a color defined as a new color.js Color object, converts it to an sRGB string as a default. The script then tests if the browser supports different color spaces LCH and Display-P3 using the css.supportshttps://developer.mozilla.org/en-US/docs/Web/API/CSS/supports method. If the color space is...
This article updates Importing JSON and CSS on Javascripthttps://publishing-project.rivendellweb.net/importing-json-and-css-on-javascript/ and corrects come mistakes from the previous post. In Importing JSON and CSS on Javascripthttps://publishing-project.rivendellweb.net/importing-json-and-css-on-javascript/ we discussed the ability to import CSS and JSON directly into Javascript using ESM syntax and import assertionshttps://v8.dev/features/import-assertions. It is now possible to import JSON and CSS into a Javascript module to have some level of control over when they are processed. We import CSS modules like this: js import sheet from './styles.css' assert { type: 'css' }; And then have the option to add them to the document style sheet or to a custom element's...
A while back I wrote a set of Vue 2 components for a WordPress blog. It wasn't a complete project, was missing functionality that I couldn't figure out how to implement and I was afraid it would lock me into a framework although I would rather get locked into Vue than any of the other frameworks I've seen out there. Rather than work with a specific framework, I decided to revisit this as custom elements/web components. according to Custom Elements Everywherehttps://custom-elements-everywhere.com/ most frameworks, at least those that were tested by the site, have pretty good support for custom elements. Even...
