The CSS Color Level 5 specification defines a way to provide contrast between background and foreground colors. The color-contrast function takes the followng arguments: A color for the background Two or more colors to compare against the background color. The one with the highest contrast ratio will be used as the foreground color with an optional target contrast levelhttps://www.w3.org/TR/WCAG21/contrast-minimum will be used. The target contrast level can be a number or one of the following strings: AA, AA-large, AAA, or AAA-large each representing a different requirement for body text versus large text they have different contrast requirements and AA versus...
CSS is adopting a lot of new features that in the past were only available in pre-processors or via Javascript. One of those features is the ability to lighten and darken colors like SASS darken and lighten functions. There are multiple ways to achieve the desired goal. I've chose to use the color-mixhttps://drafts.csswg.org/css-color-5/color-mix function as defined in the CSS Color Module Level 5https://drafts.csswg.org/css-color-5/. According to the spec: > This function takes two https://drafts.csswg.org/css-color-4/typedef-color specifications and returns the result of mixing them, in a given <color-space>https://www.w3.org/TR/css-color-5/typedef-color-space, by a specified amount. So basically, to use color-mix you need three things: The color...
In The File System Access API: simplifying access to local fileshttps://web.dev/file-system-access/, the authors describe how to use the API to create file management functionality for web applications The idea is that we'll be able to open a file from, display it in the browser and then if desired, save it to a new location in our local file system. To open a file we'll use the following code. We define the following constants and variables: Capture the button to open a file Capture the button to save a file Capture the text area where we'll insert the text Capture the...
In 2021 I thought of building a text editor based on Monacohttps://github.com/microsoft/monaco-editor and built as an Electronhttps://www.electronjs.org/ application was a good idea. Rather than wrap Electron around the app, I will try to build an editor again but make it a PWA. A PWA presents many of the advantages of a native app without many of the disadvantages. Don't require downloads There is no app store to download from Updates are automatic since there is no app store to download from Installation is optional you can either run it in your browser or install it on your computer as a...
In the last post, we built a basic PostCSS workflow using Gulp. This post will cover additional features that are nice to have in a workflow but are not required to run it. We will also look in some detail at postcss-preset-envhttps://preset-env.cssdb.org/, what it would allow us to do and how it would work. The plugins thoughts The list of plugins that I want to use shows what they are, what I expect them to do, and a little research on SASS equivalency. postcss-color-function : postcss-color-functionhttps://github.com/postcss/postcss-color-function provides color manipulation functions equivalent to SASS @lighten and @darken. : The color functions...
For a while, SASS was all we needed. I was OK with it only being available as a Ruby Gem the original implementation was written in Ruby, then I was happy when LibSASS came around written in C and might have even been OK with the Dart implementation becoming the reference implementation and the SASS team deprecating the Ruby and C implementations, eventually stopping work on them altogether. But one thing that SASS has never done is give you the possibility of testing new CSS features as Babel does for Javascript. I first heard of PostCSShttps://postcss.org/ when Autoprefixer became a...
Rather than write about whatever catches my eye, I want to be a little more disciplined about what I write. These are some of the things I plan to do. If there's something that particularly catches my eyes, I may write about it and either include it in the regular Monday and Wednesday post or put it in the schedule for a Friday Special... no guarantees either way. Course Builder This idea looks for a way to programmatically build courses packages to use either in LMSs or as static content. It may be a good idea to base this on...
There are times when it would be really nice if we could resize a piece of content on a page without having to use Javascript. That's where the resizehttps://developer.mozilla.org/en-US/docs/Web/CSS/resize property comes in handy. Using the property in an element tells the browser what direction the element can be resized on. The most basic example of a resizable element looks like this: css .container { height: 300px; width: 300px; resize: both; overflow: auto; } The possible values for resize are: none : The element offers no user-controllable method for resizing it. This is the default value if it's not present both...
The CSS Containment Module Level 3https://drafts.csswg.org/css-contain-3/propdef-container-type has a formal definition of containers, container queries, and container relative length units. This post contains both parts that are supported in Chromium browsers behind a flag and others that are under development. It is not production code and should not be used as such. Defining the container Before we use container relative length units we need to define a container that the units will refer to. Containers allow you to create a finer-grained level of sizing for components that will be more specific than regular units that refer to a window or viewport...
There are times when browsers are too helpful. When there is no font to render bold, italic or small-caps text the browser will or synthesize the styles with unpredictable results but, likely, not what you want. The font-synthesishttps://developer.mozilla.org/en-US/docs/Web/CSS/font-synthesis descriptor allows authors to control whether supporting browsers will synthesize boldface, italics, small caps, or a combination of one more of these when there are no fonts available to render the correct. The possible values for the descriptor are: none : Neither bold, italic, nor small-caps typefaces may be synthesized. weight : A bold typeface may be synthesized. style : An italic...
