prefers-color-scheme is geared towards accommodating user preferences. With prefers-color-scheme we can control the color scheme we use based on the operating system preferences for the user. It supports three values: - no-preference: The user has not specified a preference. This keyword value evaluates as false - light: The user has indicated that uses a light theme dark text on light background - dark: The user has notified the system that they prefer a page that has a dark theme light text on dark background. The example below taken from prefers-color-scheme: Hello darkness, my old friendhttps://web.dev/prefers-color-scheme/ shows one way to use...
I'm doing this post to reply to a series of tweetshttps://twitter.com/wendyareid/status/1204922559894097926 from Wendy Reid, chair of the W3C Publishing WG, presenting questions about the future of digital publishing. Rather than reply via tweets, I've consolidated my thoughts here and broken them down according to the tween in the stream that I think they address. \\Comment on tweet 1\\ I think you should start asking why is epub the predominant format outside Amazon and Apple and why there's no desire for even exploring another format and its implications. We already use XHTML in epub so why are we so afraid that...
> Thanks to Jason Pamentalhttps://twitter.com/jpamental for feedback on this post. Variable fonts have a problem as currently implemented. If you use font-variation-settings to control the different axes of the font then every time one changes you must change the other ones or they will reset back to their default values. We'll use Recursivehttps://www.recursive.design/ as the font for this post. Recursive has two custom axes: Monospace and Csual and three default axes: Weight, Slant and Italics. The axes information is shown in the table below. | Axis Designation | Axis Name | Min Value | Max Value | Default | |...
Most of the time it's ok to work with left and right to define elements of our design; that's what we're used to: English and other western languages that read from left to right and top to bottom. However if your design uses right to left text or you plan to internationalize the text you may want to consider logical properties. Logical propertieshttps://drafts.csswg.org/css-logical/ provide styles that control the logical layout of a document as opposed to the physical layout. In other words, logical layouts are independent of the physical look of the document. According to the specification: > This module...
Every so often I hear people complaining about accessibility and what should we do about it and more important whether we, as developers, should care about accessibility. The tweet below made me think about this again in a larger context. Should commercial websites be required by law to implement a minimum level of WCAG? a11y— dave.js @davejs November 25, 2019 I'm reminded of a phrase that was the mantra with the accessibility team at HTCTU while I was working on the Virtual Campus: There is never time to do it right but there's always time to do it over. The...
Web Portalshttps://en.wikipedia.org/wiki/Webportal as technology are not new. Java has used portletshttps://en.wikipedia.org/wiki/JavaPortletSpecification as defined in JSR 362 for the latest edition in containers for a long time. Teams have used other languages to use Portals. Chrome has reintroduced the concept of portalshttps://wicg.github.io/portals/ in a different context. They are meant to navigate from page to page and give you a preview of the content before you navigate to it. According to the specification: > This specification extends HTML to define a new kind of top-level browsing contexthttps://html.spec.whatwg.org/multipage/browsers.htmltop-level-browsing-context, which can be embedded in another document, and a mechanism for replacing the contents of...
When researching how best to use Recursive, I did the following exercise. I took the basic selectors for Prism.js and modified them to use Recursive as the primary font. I did it for the following reasons: - We're already using Recursive throughout the document so we don't need to download another font - Recursive has a monospaced axis that works well for code blocks - If needed we can do further work using other features of the variable font The modified code loooks like this: css codeclass="language-", preclass="language-" { color: 657b83; / base00 / / add Recursive to the font...
Recursivehttps://www.recursive.design/ is a variable font under development by Arrowtype that caught my attention by the possibilities it provides. Recursive provides two custom axes: One that moves from monospaced to sans-serif and another one that ranges from standard/linear to more casual/playful styles. It also provides three standard axes: Weight, Slant, and Italics. The combination of these 5 axes in 64 pre-defined instance variables makes for a very expressive font that can serve many duties in a site or application without adding font files and impacting performance. In a previous posthttps://publishing-project.rivendellweb.net/custom-material-design-typography/ I looked at using Recursive in the context of Material Design...
In a previous post I created a page using Material Design's default typography classes and the fonts they are designed to work with. What I didn't realize is that you can also create custom typographical systems using SASS and the existing typographical infrastructure for material design. I will also explore whether Recursivehttps://www.recursive.design/ works well with Material Design Getting started Because we're using a variable font with custom axes we need to define the default values in the stylesheet's :root element and then use custom properties to handle inheritance problems in variable fonts as documented in Boiling eggs and fixing the...
> When working with underlining content other than links on the web be mindful of user expectations and provide some way to distinguish links from other types of underlined content. First, we had links that were underlined. Next, we had links and the capability to underline text with the uhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/u element. Then we wanted more control of what we could do with underlines so we moved to use border-bottom for our underlining playground because it gave us more flexibility than what the native underlining tools gave us at the time. But now Firefox has introduced new text-decoration and text-underline rules...
