3A - Push Publish (Netlify)
Six Interesting Almanac Selectors or Properties
- :has()
- The :has() pseudo-class selects the selected element that also contains the selector that is passed into it as an argument. This is useful for styling elements only when specific features are within the element, for example styling a card differently when a card image is available. Specificity is determined by the most specific element in its argument list.
- ::backdrop
- The ::backdrop pseudo-element creates a backdrop that covers over the entire viewport, and is rendered directly below any element that enters fullscreen mode. This can be useful when creating modal windows to improve UX and remove confusion over why a main window interaction is unresponsive.
- :indeterminate
- The :indeterminate pseudo-class is a CSS selector for a state that is neither checked nor unchecked. It is interesting because that is not a state that can be set for a checkbox currently within HTML, and JS must be used. It is meant to provide a third option to check boxes - checked, unchecked and indeterminate. Since it is not a valid state within HTML, it is meant to be used as a visual tool, and not functional.
- scroll-behavior
- The scroll-behavior property allows for smooth scroll animations when a user clicks to a link within the scrolling box. Typically default behavior from the browser will 'jump-cut' directly to the link, but with scroll-behavior: set to smooth, the browser will animate a gentle scroll to the location.
- color-scheme
- The color-scheme property lets the browser choose to display certain elements with its dark or light default styling to allow for "light mode" and "dark mode" theme variations. It provides the browser with a hint about the primary color of the page. It can also be used to prevent a browser from using either light or dark styling.
- animation-timeline
- The animation-timeline property specifies the timeline that is used to control the progress of a CSS animation. It is currently experimental, with main support with Chromium browsers, flagged on Firefox and there is no support on Safari. One of the most popular uses for this will be animating elements based on scroll, such as a navigation menu condensing in size as you move off the top of the page. This was previously done using JS, but will eventually be supported with vanilla CSS.