Platform News: Prefers Contrast, MathML, :is(), and CSS Background Initial Values

This week's web technical news: prefers-contrast , MathML, :is() and CSS background initial values

The Safari preview version supports prefers-contrast media query, MathML has improved, :is() has increased fault tolerance, more ADA-related lawsuits, and inconsistent initial values ​​of CSS background attributes may lead to unexpected (but quite interesting) patterns.

Safari preview version supports prefers-contrast media query

Following prefers-reduced-motion in 2017, prefers-color-scheme in 2019 and forced-colors in 2020, the fourth user preference media feature is gradually entering the browser. CSS prefers-contrast: more media query is now supported in Safari preview. This feature allows the website to respond to users' preferences for higher contrast.

 .pricing-info {
  color: #86868b; /* Contrast 3.5:1 */
}

@media (prefers-contrast: more) {
  .pricing-info {
    color: #535283; /* Contrast 7:1 */
  }
}

Mathematics become a first-class citizen of the Internet

One of the earliest specifications W3C formulated in the mid-to-late 1990s was MathML, a markup language used to display mathematical symbols on the network. Firefox and Safari currently support this language. Chrome removed its implementation in 2013 because of “issues involving security, performance, and low usage on the internet.”

If you are using Chrome or Edge, enable Experimental Web Platform Features on the about:flags page to view the demo.

Work is currently in progress to properly integrate MathML into the web platform and bring it to all browsers in an interoperable manner. Igalia has been developing MathML implementations for Chromium since 2019. The new MathML Core Level 1 specification is a basic subset of MathML 3 (2014) and is "browser implementation best". If W3C approved, the new Mathematics Working Group will work to improve accessibility and searchability of MathML.

The mission of the Mathematics Working Group is to promote the integration of mathematics on the Internet, so that it can be a first-class citizen of the Internet, well displayed, easy to access, and searchable.

CSS :is() improves fault tolerance of selector list

The new CSS :is() and :where() pseudo-classes are now supported in Chrome, Safari, and Firefox. In addition to their standard use cases (reducing duplication and maintaining low specificity), these pseudo-classes can also be used to make selector lists "more fault-tolerant".

For legacy reasons, the general behavior of selector lists is that if any selectors in the list fail to parse...the entire selector list will become invalid. This makes it difficult to write CSS that uses the new selector and still works properly in the old user agent.

In other words, "If any part of the selector is invalid, it will invalidate the entire selector." However, wrapping the selector list in :is() makes it fault-tolerant: unsupported selectors will be simply ignored, but the rest will still match.

Unfortunately, pseudo-elements do not work in :is() (although this may change in the future), so it is currently impossible to convert pseudo-elements with both vendor prefixes to fault-tolerant selector lists to avoid duplicate styles.

 /* An unsupported selector invalidates the entire list*/
::-webkit-slider-runnable-track, ::-moz-range-track {
  background: red;
}

/* Pseudo-elements do not work in :is()*/
:is(::-webkit-slider-runnable-track, ::-moz-range-track) {
  background: red;
}

/* Therefore, the style must unfortunately be repeated*/
::-webkit-slider-runnable-track {
  background: red;
}
::-moz-range-track {
  background: red;
}

Dell and Kraft Heinz are sued for website accessibility issues

More and more U.S. businesses are facing lawsuits over accessibility issues for their websites. Recently, Dell, a tech company, was sued by a visually impaired person who was unable to use JAWS and VoiceOver screen readers to browse Dell's websites and online stores.

The defendant failed to effectively communicate information about his products and services because Screen reader aids do not have access to important content on digital platforms . …Digital platforms use visual clues to convey content and other information. Unfortunately, screen readers cannot explain these clues and convey the information they represent to the visually impaired.

Earlier this year, Kraft Heinz Foods was sued for failing to comply with the accessibility guidelines for web content on one of its websites. The complaint states that the website does not declare language (lang attributes) and provides accessible tags for its image links, etc.

In the U.S., the Americans with Disabilities Act (ADA) applies to websites, meaning that if a retailer’s website is inaccessible, people can sue them. According to the CEO of Deque Systems, the manufacturer of axe, the recent increase in cyber ADA litigation can be attributed to the lack of a single overarching regulation that will provide specific compliance requirements.

background-clip and background-origin have different initial values

By default, the CSS background is drawn within the element's border ( background-clip: border-box ), but is positioned relative to the element's fill box ( background-origin: padding-box ). If the border of the element is translucent or dotted/dotted, this inconsistency can lead to unexpected patterns.

 .box {
  /* Translucent border*/
  border: 20px solid rgba(255, 255, 255, 0.25);

  /* Background gradient*/
  background: conic-gradient(
    from 45deg at bottom left,
    deeppink,
    rebeccapurple
  );
}

Due to different initial values, the background gradient in the above image is repeated tiling on all sides under the translucent border. In this case, it is more reasonable to position the background ( background-origin: border-box ) relative to the border frame.

The above is the detailed content of Platform News: Prefers Contrast, MathML, :is(), and CSS Background Initial Values. For more information, please follow other related articles on the PHP Chinese website!