Big Browser News: Safari Aims for Better Contrast
CSS user-preference media queries continue to expand. Safari Technology Preview now supports prefers-contrast: more, adding to the suite of features that already includes prefers-reduced-motion, prefers-color-scheme, and forced-colors. Web developers can now detect when a user requests a higher-contrast interface and adjust their styles accordingly.
.pricing-info {
color: #86868b; /* contrast ratio 3.5:1 */
}
@media (prefers-contrast: more) {
.pricing-info {
color: #535283; /* contrast ratio 7:1 */
}
}Math on the Web Gets Another Push
MathML, one of the W3C's earliest markup languages for mathematical notation, has languished with spotty browser support. Firefox and Safari handle it, but Chrome removed its implementation in 2013 due to security, performance, and low-usage concerns. Users of Chrome or Edge, however, can experiment with MathML by enabling "Experimental Web Platform features" on the about:flags page.
Efforts to standardize MathML are moving forward. Igalia has worked on a Chromium implementation since 2019. The proposed MathML Core Level 1 spec is a leaner subset of MathML 3, aimed at ease of browser implementation. Should the W3C approve it, a Math Working Group would be tasked with improving both the accessibility and searchability of math content on the web.
The mission of the Math Working Group is to promote the inclusion of mathematics on the Web so that it is a first-class citizen of the web that displays well, is accessible, and is searchable.
:is() Makes Selector Lists Forgiving
The :is() and :where() pseudo-classes are fully supported in Chrome, Safari, and Firefox. Their appeal goes beyond reducing repetition and managing specificity. Wrapping a list in these pseudo-classes changes how browsers handle parse errors in selectors.
Standard selector lists are strict: if one selector anywhere in the list fails to parse, the entire declaration is dropped. This is problematic for writing progressive CSS that uses modern selectors without breaking older browsers. By contrast, an :is() list is "forgiving"—unsupported selectors are ignored individually while the valid ones continue to work.
One gap exists: pseudo-elements like ::before are not allowed inside :is(). As a result, you cannot use this trick to merge two vendor-prefixed pseudo-element selectors into one forgiving rule.
/* One unsupported selector invalidates the entire list */
::-webkit-slider-runnable-track, ::-moz-range-track {
background: red;
}
/* Pseudo-elements do not work inside :is() */
:is(::-webkit-slider-runnable-track, ::-moz-range-track) {
background: red;
}
/* Thus, the styles must unfortunately be repeated */
::-webkit-slider-runnable-track {
background: red;
}
::-moz-range-track {
background: red;
}Another Round of ADA Lawsuits Against Big Brands
Dell and Kraft Heinz are the latest companies to face legal action over inaccessible websites. Dell was sued by a visually impaired user who could not navigate the company's site using JAWS and VoiceOver screen readers.
...screen reader auxiliary aids cannot access important content on the Digital Platform. [...] The Digital Platform uses visual cues to convey content and other information. Unfortunately, screen readers cannot interpret these cues and communicate the information they represent to individuals with visual disabilities.
Kraft Heinz faced a similar lawsuit over its corporate website, where the complaint flagged that the site lacked a declared lang attribute and accessible labels on image links. These suits fall under the Americans with Disabilities Act (ADA), which applies to websites, making retailers vulnerable to litigation over digital access. Deque Systems' CEO attributes the rise in such cases to the absence of a single, clear federal regulation spelling out web compliance expectations.
The CSS Background Default That Works Against You
CSS' initial values for background properties create a subtle mismatch. By default, a background is painted within the border box (background-clip: border-box), but it is positioned relative to the padding box (background-origin: padding-box). This quirk is mostly invisible until an element has a semi-transparent or dashed border.
.box {
/* semi-transparent border */
border: 20px solid rgba(255, 255, 255, 0.25);
/* background gradient */
background: conic-gradient(
from 45deg at bottom left,
deeppink,
rebeccapurple
);
}The result: repeating gradients or patterns can tile awkwardly beneath the border. Setting background-origin: border-box usually offers the more sensible alignment; it positions the background correctly in relation to the border box rather than the padding box.
