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...
CSS Font Loading Module Level 3https://drafts.csswg.org/css-font-loading/ presents a Javascript API for loading fonts in a similar way to how Fontface Observerhttps://fontfaceobserver.com/ works. This API allows you to do more things than third-party tools can and it's set up to interact directly with the browser's font loading process. In its most basic application, the API will load the font, add it to the list of available fonts can, optionally, add it to the document's stylesheet and cause it to render right away. This may harm CLS but it's the only way to get the font to render right away. The FontFace...
There are times when the mobile version of an app doesn't work but the actual version does, or we might want to run the app in an actual device to see how it works. We need a way to run the code on a real mobile device so we can debug code issues and see how the app works under real mobile device conditions. People sometimes suggest I should calm down about web performance because the web feels fine on their phone.@DasSurma and I pulled a little data to try to visualise why that might be both true and not...
I've looked at CSS Paged Media in the past. IMO it's an awesome technology that allows you to create stunning end products from your HTML, CSS, and, optionally Javascript. The layouts for the printed material can be very simple, or they can be as complex as the book CSS Secretshttps://www.oreilly.com/library/view/css-secrets/9781449372736/ by Lea Verouhttps://twitter.com/LeaVerou/. I've worked with a two different CSS Paged Media processors: PrinceXMLhttps://www.princexml.com/ and Antenna Househttps://www.antennahouse.com/. They are both good products but they require a license purchase before you can use their full capabilities. The new products I want to review are: PDFreactorhttps://www.pdfreactor.com/ Weasyprinthttps://weasyprint.org/ typeset.shhttps://typeset.sh/en When I discuss individual...
