There are times when we know that users will print a page of web content. Maybe a set of directions for a recipe, a map with directions or a page of information that we want to preserve. While it's impossible to guarantee how browsers will print the document we can use the print-color-adjusthttps://developer.mozilla.org/en-US/docs/Web/CSS/print-color-adjust property to help the browser in the process. print-color-adjust provides a hint to the user-agent about how it should treat color and style choices that might be expensive or generally unwise on a printer or similar device. If user agents allow users to control this aspect of...
In Revisiting Custom Propertieshttps://publishing-project.rivendellweb.net/revisiting-css-custom-properties/ we looked at how to define custom properties using the @property at-rule. One aspect of @property that we didn't discuss are the syntax multipliers and combinators. These two gives us more flexibility when it comes to defining what our @property-defined variables can do. Quick Review A CSS variable defined with @property looks like this: css @property --border-block { syntax: ""; inherits: false; initial-value: 2rem; } The name of the property follows the @property at rule and must have two dashes -- The following list, taken from the Supported Nameshttps://drafts.css-houdini.org/css-properties-values-api/supported-names section of the CSS Properties and Values...
Crtical CSS is simple in theory but not so much in execution. In this post we'll look at what critical CSS is, how does it work and whether it's still necessary for all use cases. What is Critical CSS Critical CSS is the CSS and assets necessary to render the above the fold content for a given page. You inline this bit of CSS inside a style tag in the head of the document and load the document like you normally would. How does it work? Critical CSS works in three stages 1. Identify the CSS that goes above the...
When working with web content, it is important to check what browsers your content is compatible with. There are three ways to do this: Web UI caniusehttps://caniuse.com provides a basic compatibility table for most major desktop and mobile browsers. MDNhttps://developer.mozilla.org/ goes a step further than Caniuse, it also provides additional information about the property, how it works and the specification that the property belongs to. Both Caniuse and MDN require you to have a browser open on the right site and actively search for the property or API you're looking for. Programmatic Tools MDN provides its browser compatibility datahttps://www.npmjs.com/package/@mdn/browser-compat-data as...
Relative color syntaxhttps://www.w3.org/TR/css-color-5/relative-colors gives developers a lot of power to control the colors we use in our pages. In this post I will base the examples on code from CSS relative color syntaxhttps://developer.chrome.com/blog/css-relative-color-syntax/ by Adam Argylehttps://twitter.com/argyleink. I will try to keep it simple, if you want more details check Adam's article, it goes into a lot of detail on how to use the syntax to do a lot of things. Basic syntax and the from keyword at the most basic, the structure of the syntax is as follows 1. The color space for the resulting color 2. The from keyword...
CSS Colors Level 4https://www.w3.org/TR/css-color-4/ introduced new syntactic sugar to color functions. It also added 14 different color spaces and ways to define colors. The one thca caught my attention is the OKLCH color space. In oklchL C H or oklchL C H / a each item corresponds as follows: L is perceived lightness 0%-100%. “Perceived” means that it has consistent lightness for our eyes, unlike L in hsl. C is chroma, from gray to the most saturated color. H is the hue angle 0-360. a is alpha or opacity 0-1 or 0-100%. css p { color: oklch0.31 0.2 265 /...
While researching about using resets as the basis for custom project defaults, I came accross this solution to a problem I was having. > pre, code, kbd, samp The font-family: monospace, monospace hack fixes the inheritance and scaling of font-size for preformatted text. The duplication of monospace is intentional. Source. > > Source: Normalize.css READMEhttps://github.com/necolas/normalize.cssreadme To me, this became evident when using code elements inside a header. If the element that contains the code element is sized using em the different in font size is obvious. However, if you size the element using rem the change doesn't appear to happen...
There are more areas I'm working on as I move from WordPress to Eleventy that, in my opinion, are easier to do with a static site generator. There is still more to work on as I've officially moved the site, I will continue to post in this series as I finish the other pieces of content. Identifying links to the Wayback Machine There are times when the site I link to has been removed, has moved behind a paywall or has become unreachable. Most of the time I will just remove the link but there are situations where the content...
These are more random, miscelaneous, items that I'm working on to make the site look as close as possible to the WordPress version of the site. Implement Archive Pagination The way I want the blog structured, the index page only has the last 10 published posts and a link to the archive. In the first iteration, I want the archive to be paginated on 10-item blocks. yaml --- layout: layouts/home.njk pagination: data: collections.posts size: 10 reverse: true permalink: "{% if pagination.pageNumber > 0 %}page-{{ pagination.pageNumber }}/{% endif %}index.html" --- The content of the post itself doesn't change. It remains the...
People who have been waiting for the Temporal proposal, and for browsers to release their implementations unprefixed, have reason to be happy : IETF has approved draft-ietf-sedate-datetime-extendedhttps://datatracker.ietf.org/doc/draft-ietf-sedate-datetime-extended/, which was the last block before moving Temporal to stage 4 in the TC-39 processhttps://tc39.es/process-document/. Now, short of major implementation issues reported to TC39, this should move to stage 4 once two interoperable implementations ship in browsers. Using the Temporal polyfillhttps://www.npmjs.com/package/temporal-polyfill provides a spec-compliant workaround for the API until browsers implement it natively. I discussed using the polyfill along with examples of how the API works in Revisiting the TC39 Temporal proposal/revisiting-the-tc39-temporal-proposal/
