Javascript provides a way to shortcircuit if/else statements with the conditional or ternary operatorhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditionaloperator. the idea is that we consolidate the three parts of the if statement in one command, like shown below: js function canPassisAdult { return isAdult ? 'Yes, can pass' : 'No, cannot pass'; } In this example, isAdult is the test we want to execute. The string after the question make ? returns if the test is true and the secod string after the colon : returns if the test is false. if the true and false statemnts are too complex or too long, we should...
I came accross reset from Harry Roberts from Twitter/Xhttps://twitter.com/csswizardry/status/1717841334462005661 via Kevin Powell's YouTube videohttps://www.youtube.com/watch?v=345V2MU3Ew. I've adapted the reset by eliminating the low quality image resource. I don't need the low quality images at least I don't think I do. The initial image styles look like this: css img { max-width: 100%; / 1 / height: auto; / 1 / vertical-align: middle; / 2 / font-style: italic; / 3 / font-size: .75rem; / 4 / } Each line performs a specific task: 1. Allow for fluid image sizing while maintaining the image aspect ratio 2. Remove ‘phantom’ whitespace. Softer way to...
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...
