Most of the time media queries in CSS will work fine for what we want to do but there are times when just having the media queries will not be enough. The first example that I can think of is doing something based on changes to the preferred color scheme. While the CSS Media Query should be enough to do the work, we can't be certain it will. Before you can evaluate the results of a media query, you need to create the MediaQueryList object representing the query. To do this, use the window.matchMediahttps://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia method. To detect changes to the...
CSS logical propertieshttps://publishing-project.rivendellweb.net/working-with-logical-properties-and-writing-modes/ provide a way to style elements based on the direction the language is written in left to right, right to left or top to bottom. Defining terms To better understand logical properties, we need to work with the following terms: Block dimension : The dimension perpendicular to the flow of text within a line, i.e., the vertical dimension in horizontal writing modes, and the horizontal dimension in vertical writing modes : For standard English text, it is the vertical dimension. Inline dimension : The dimension parallel to the flow of text within a line, i.e., the horizontal...
Uploading videos to YouTube in a given format doesn't mean that's the format that will play for all users. Most of the time we don't notice but YouTube will re-encode the video we upload into multiple videos using different codecs at different bitrate/resolution combinations. According to the first article, Which Codecs Does YouTube Use?https://streaminglearningcenter.com/codecs/which-codecs-does-youtube-use.html, the version of your video that you will get is based on the number of views the video has accumulated. As far as I understand it, the list goes like this The default conversion is to MP4 with a resolution of up to 1080p. When a...
When preparing a video for uploading to YouTube, it's tempting to go to the top of the line and choose to upload the biggest or the smallest file possible and see what YouTube does with it. If you're working with the YouTube Content Manager, this support articlehttps://support.google.com/youtube/answer/1722171?hl=en explains what the settings for that specific encoding settings are to use when using that product. Otherwise, we can use the following media formats: .MOV .MPEG-1 .MPEG-2 .MPEG4 .MP4 .MPG .AVI .WMV .MPEGPS .FLV 3GPP WebM DNxHR ProRes CineForm HEVC h265 We will discuss how to encode a video into two versions: One...
Google is prototyping an unofficial CSS Toggleshttps://tabatkins.github.io/css-toggle/ specification. The specification defines a way to associate a toggleable value with an element which developers can use to select an element and declarative ways to set and modify this value on the element. This is not a complete specification that is ready to use in production. There are some issues still remaining, including accessibility concerns that can't be resolved by the toggles specification alone. The HTML is just a basic button. We also use a script tag to load the CSS toggles polyfillhttps://unpkg.com/browse/@oddbird/css-toggles@1.0.2/ from a CDN. In a more rigorous test, I...
In a previous post, we discussed what it takes to create action buttons that execute a specific action. In this post, we'll discuss toggle buttons, a special type of button that changes based on the status of the button, like if the audio track is playing or not. Toggle button Like we did with the action button, we need to look at the roles and attributes we need to have in a custom button. The biggest difference is the aria-pressed attribute we will add programmatically. This attribute tells assistive technology tools whether the button is pressed or not. | Role...
We take a lot of what HTML does for granted and assume that whatever we throw at the browser will do the same thing. One of the earliest examples I remember is creating our own custom buttons. We will use this code adapted from the ARIA Authoring Practices Guide APG button exampleshttps://www.w3.org/WAI/ARIA/apg/example-index/button/button.html as we go through the process of turning this code: html Print Page Into an accessible and usable button. The first set of changes are attributes to the HTML code itself: | Role | Attribute | Element | Usage | | --- | --- | --- | ---...
I first saw information about color fonts in 2013 in Color fonts. Overview of the proposals for color extensions of the OpenType font format.https://www.fontlab.com/news/color-font-format-proposals/ but they haven't taken off despite Safari supporting one type of color font SVG in OT. It's only been in the last couple of years since 2021 when browsers other than Safari started implementing color fonts COLRV1 and it's only in 2022 that browsers have implemented the CSS necessary to make color fonts really useful, as documented in COLRv1 and CSS font-palette: Web Typography Gets Colorfulhttps://css-tricks.com/colrv1-and-css-font-palette-web-typography/ This post will discuss the COLRV1 color font format and...
There are multiple ways to handle theming an app or a site. The first one depends on whether the user has enabled light or dark mode at the operating system level. We can use prefers-color-schemehttps://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme\ media queries like any other media queries, loading them in a stylesheet: css @media prefers-color-scheme: dark { / all styles for dark color scheme go here / } @media prefers-color-scheme: light { / all styles for light color scheme go here / } A more interesting approach is to use the media query as the value of the media attribute of the linkhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/link element. This...
Using templates in Web pages has always been complicated and always required third-party libraries like Handlebarshttps://handlebarsjs.com/ and Moustachehttps://mustache.github.io/ HTML templateshttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/template, part of the web components family of specifications, provide a native way to use templates on the web with minimal Javascript interaction. Templating in HTMLhttps://kittygiraudel.com/2022/09/30/templating-in-html/ explains the basics of how to use a template element to create reusable code in your page. The first step is to create the template in HTML. We give it an ID so it's easier to retrieve from Javascript later. This template is inert meaning that it won't be read by the browser's HTML parser...
