A New 'Web' Readiness Report

A serendipitous research detour led to a nostalgic trip down memory lane and the creation of a modern web readiness tool. While researching a little-used CSS at-rule, a click led to a blog post about "HTML5 Readiness Hacking," a website showcasing browser support for cutting-edge web features from 2010-2013. This sparked an idea: a new "Web Readiness 2025" tool.

The result is webreadiness.com, a website tracking browser support for exciting upcoming HTML and CSS features. Currently, it's sparsely populated, but the plan is to watch the rainbow of support grow over time.

This project served as a learning opportunity. Data is sourced from the Web Features API (https://www.php.cn/link/b305c4982512d2529ad05ee542a18133), bypassing the more cumbersome <baseline-status></baseline-status> web component, although the author initially considered using it. Each feature's support is displayed using a web component, "BaselineRay," designed to fetch and display browser compatibility data. The code snippet below illustrates the component's basic structure:

class BaselineRay extends HTMLElement {
  constructor() {
    super();
  }

  static get observedAttributes() {
    return ["data-feature"];
  }

  attributeChangedCallback(property, oldValue, newValue) {
    if (oldValue !== newValue) {
      this[property] = newValue;
    }
  }

  async #fetchFeature(endpoint, featureID) {
    // Fetch Feature Function
  }

  async connectedCallback() {
    // Call fetchFeature and Output List
  }
}

customElements.define("baseline-ray", BaselineRay);

Animations, using the Web Animation API, enhance the user experience. The author initially considered Same-Document View Transitions but opted for the Web Animation API due to challenges with browser default transitions and documentation. Clever use of sibling-index() and sibling-count() (polyfilled with JavaScript) allows for dynamic positioning and rotation of each ray in the rainbow. Finally, the interactive browser caption highlighting uses the CSS :has() selector, eliminating the need for JavaScript.

The future of webreadiness.com involves monitoring feature support and taking yearly snapshots. The author encourages feedback and suggestions for missing features. The project aims to be a valuable resource for tracking the evolution of web technologies. Check out the report for more details!

The above is the detailed content of A New 'Web' Readiness Report. For more information, please follow other related articles on the PHP Chinese website!