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...
I came to optical sizing via variable fonts. The idea is that by having an optical sizing axis in your variable font you can control how the font looks at different sizes. For small text sizes, usually have thicker strokes with larger serifs. Larger text often has more contrast between thicker and thinner strokes. Optical sizing will only work with variable fonts that have an opsz axis. If the font doesn't have an optical sizing axis, there will be no effect. They are also limited to operating systems that support variable fonts. We're using Amstelvarhttps://github.com/TypeNetwork/Amstelvar/releases for the code and the...
Note: This feature is under development and there are currently no implementations in browsers, even behind flags. Do not use this in production unless you transpile with PostCSS or SASS. One of the things that drove me to SASS was the ability to nest selectors to make the code easier to reason through and understand. For the longest time I've used something like this to style my links: scss a { color: $colorlink; text-decoration: none; text-decoration-skip-ink: auto; &:visited { color: $colorlink-visited; text-decoration: underline; text-decoration-skip-ink: auto; } &:hover, &:focus, &:active { color: $colorlink-hover; text-decoration: underline; text-decoration-skip-ink: auto; } &:focus { outline:...
This post is about CSS specifications that are still under development and, as far as I know, have no implementation in production browsers yet. Furthermore, the specification may change in the future. To keep track of the progress, please follow the Cascade Layers section of the CSS Cascading and Inheritance Level 5https://www.w3.org/TR/css-cascade-5/ specification. Looking at some of the current draft specifications, I found something that looks very promising and, when implemented, will be a very useful feature. The feature is called CSS Layers and it's a way to group elements together so they will cascade as a unit. > In...
A lot of the tools in my projects like Autoprefixer, Babel's preset-env and preset-modules use browserslist yes that's the name, no typo to decide if adding prefixes or transpiling is required. The hardest thing for me to decide is what versions to support and whether they will be the same for all projects or all tools. For example, I'm all for supporting ES2017 and earlier in my projects. ES 2017 support means that we're supporting all the features I would like to use in my projects without having to be afraid of substantial differences in support or broken implementations broken...
The font-variant- properties are used to control the appearance of text by enabling or disabling OpenType features available on the font. Not all fonts have the same set of OpenType Features available so it is possible that a given font-variant- property will produce no results or produce a different result to what you intend. One of the things that make working with variable fonts is the uneven support of font-variant- attributes between browsers. That's why we have to use font-feature-settings and reset the rule every time we make a change. To see what features are available in a font you...
When I wrote my article reviewing font-variant- attributes I realized that I needed a way to see what OpenType features the font I'm using supports. My go-to tool is Wakamaifonduehttps://wakamaifondue.com/ to see what the font has to offer. The screenshots below use Recursivehttps://www.recursive.design/, my favorite variable font, run through Wakmaifondue. If you've used Wakamaifondue before the screenshots may look a little different. These are from the beta version of the site. I chose it because the UI is better than the original. The site will first ask you to "upload" a font. All the processing is done on the browser...
There are tools that you use in all your projects and you'd rather not have to manually install every time. The project attempts to create a set of those scripts packed as an NPM module, modeled after the kcd-scripts react-scripts and @wordpress/scripts packages, that will make it easier to start new projects by adding the scripts package as a development dependency. The package will contain, at a minimum, the following: ESLint Google Configuration CSS Linting Bundler configuration Webpack Rollup Prettier configuration JS HTML Carlos's specic tools WP-env Markdown Linting If you have local configurations, they will override the ones provided...
