web.dev components

The web.dev platform includes various components to make it easy for content contributors to include common content features, like videos, side-by-side comparisons, and asides.

This post shows sample markup for each of web.dev's content components and provides guidance about how to use them effectively.

Component types

Asides

Use asides to provide information that's related to but distinct from the content in the body of the post or codelab. Asides should generally be short—no more than 2–3 lines.

Asides can contain links and formatted text, including code.

There are several kinds of asides, each for a different purpose.

Note asides

{% raw %}&#123;% Aside %&#125;
Use the note aside to provide supplemental information.
&#123;% endAside %&#125;{% endraw %}

{% Aside %} Use the note aside to provide supplemental information. {% endAside %}

Caution asides

{% raw %}&#123;% Aside 'caution' %&#125;
Use the caution aside to indicate a potential pitfall or complication.
&#123;% endAside %&#125;{% endraw %}

{% Aside 'caution' %} Use the caution aside to indicate a potential pitfall or complication. {% endAside %}

Warning asides

{% raw %}&#123;% Aside 'warning' %&#125;
The warning aside is stronger than a caution aside; use it to tell the reader
not to do something.
&#123;% endAside %&#125;{% endraw %}

{% Aside 'warning' %} The warning aside is stronger than a caution aside; use it to tell the reader not to do something. {% endAside %}

Success asides

{% raw %}&#123;% Aside 'success' %&#125;
Use the success aside to describe a successful action or an error-free status.
&#123;% endAside %&#125;{% endraw %}

{% Aside 'success' %} Use the success aside to describe a successful action or an error-free status. {% endAside %}

Celebration asides

{% raw %}&#123;% Aside 'celebration' %&#125;
Use the celebration aside to celebrate events like a cross-browser launch.
&#123;% endAside %&#125;{% endraw %}

{% Aside 'celebration' %} Use the celebration aside to celebrate events like a cross-browser launch. {% endAside %}

Objective asides

{% raw %}&#123;% Aside 'objective' %&#125;
Use the objective aside to define the goal of a process described in the body
copy.
&#123;% endAside %&#125;{% endraw %}

{% Aside 'objective' %} Use the objective aside to define the goal of a process described in the body copy. {% endAside %}

Important asides

{% raw %}&#123;% Aside 'important' %&#125;
Use the important aside to indicate a common problem that the reader wouldn't know
without specialized knowledge of the topic.
&#123;% endAside %&#125;{% endraw %}

{% Aside 'important' %} Use the important aside to indicate a common problem that the reader wouldn't know without specialized knowledge of the topic. {% endAside %}

Key-term asides

{% raw %}&#123;% Aside 'key-term' %&#125;
Use the key-term aside to define a term that's essential to understanding an
idea in the body copy. Key-term asides should be a single sentence that
includes the term in italics. For example, "A _portal_ is…"
&#123;% endAside %&#125;{% endraw %}

{% Aside 'key-term' %} Use the key-term aside to define a term that's essential to understanding an idea in the body copy. Key-term asides should be a single sentence that includes the term in italics. For example, "A portal is…" {% endAside %}

Codelab asides

{% raw %}&#123;% Aside 'codelab' %&#125;
Use the codelab aside to link to an associated codelab.
&#123;% endAside %&#125;{% endraw %}

{% Aside 'codelab' %} Using Imagemin with Grunt {% endAside %}

Update asides

{% raw %}&#123;% Aside 'update' %&#125;
Use the update aside in select cases where updates concerning a developing 
situation around a certain API or metric can be effectively communicated.
&#123;% endAside %&#125;{% endraw %}

{% Aside 'update' %} Use the update aside in select cases where updates concerning a developing situation around a certain API or metric can be effectively communicated. {% endAside %}

Banners

Default banners

Default banners can be added to site templates (for example, landing pages) to provide timely information to users (for example, an alert about an upcoming conference). Don't use default banners in the body of a post; instead, use the Aside component.

{% raw %}{% Banner %}This is an info banner. It supports Markdown.{% endBanner %}{% endraw %}

{% raw %}{% Banner 'caution' %}This is a caution banner. It supports Markdown.{% endBanner %}{% endraw %}

{% raw %}{% Banner 'warning' %}This is a warning banner. It supports Markdown.{% endBanner %}{% endraw %}

{% raw %}{% Banner %}This is a neutral banner, used to display a discreet suggestion for the user. It supports Markdown.{% endBanner %}{% endraw %}

Block quotes

To include quotation in the body of an article, use <blockquote> tag. You can include a <cite> element indicating the quote's source at the end of a block quote:

<blockquote>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Proin dictum a massa sit amet ullamcorper.
  </p>
  <cite>
    Jon Doe
  </cite>
</blockquote>

You can also use a shortcode:

{% raw %}{% Blockquote 'Jon Doe' %}
[Lorem ipsum](#) dolor sit amet, consectetur adipiscing elit. Proin dictum
a massa sit amet ullamcorper.
{% endBlockquote %}{% endraw %}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa sit amet ullamcorper.
Jon Doe

To embed a pull quote in an article, to emphasize a piece of text or a quote, you can use pullquote class:

<blockquote data-type="pullquote">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Proin dictum a massa sit amet ullamcorper.
  </p>
  <cite>
    Jon Doe
  </cite>
</blockquote>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa sit amet ullamcorper.
Jon Doe

You can also use a shortcode with a pullquote attribute:

{% raw %}{% Blockquote 'Jon Doe', 'pullquote' %}
[Lorem ipsum](#) dolor sit amet, consectetur adipiscing elit. Proin dictum
a massa sit amet ullamcorper.
{% endBlockquote %}{% endraw %}

{% Blockquote 'Jon Doe', 'pullquote' %} Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa sit amet ullamcorper. {% endBlockquote %}

Browser compatibility table {: #browsercompat }

With the BrowserCompat shortcode, you can embed an MDN - Browser Compatibility Data widget in your post. You have to pass in the dot-separated feature ID, as used on BCD Schema, e.g. for Web/API/BackgroundFetchEvent the ID is api.BackgroundFetchEvent.

{% raw %}{% BrowserCompat 'api.BackgroundFetchEvent' %}{% endraw %}

{% BrowserCompat 'api.BackgroundFetchEvent' %}

{% BrowserCompat 'api.Document.execCommand' %}

The following JavaScript snippet, run from the DevTools console, will display the correct ID for a given MDN page that's currently open:

window.alert(document.querySelector(".bc-github-link")?.href.match(/title=(.+?)\+/)[1] ?? "No browser compat widget found on the page.")

Buttons

In general, you shouldn't need to add buttons to your posts. These buttons are shown for reference.

Detailed specification

Text buttons

Icon buttons

A default icon button:

Detailed specification

An icon button with tooltip:

Callouts

Codelab callouts

In general, you shouldn't need to manually add a codelab callout to your page; instead, use the codelabs field in the post's YAML, which will automatically append a codelab callout to the end of the post.

{% CodelabsCallout ['codelab-fix-sneaky-404', 'codelab-art-direction'], lang %}

Self-assessment callouts

See the Self-assessments post.

Checkbox

To align a label to the checkbox wrap the label and checkbox in an element with a cluster gutter-base flex-align-start class.

Detailed specification

<div class="cluster gutter-base flex-align-start">
  <input id="myCheckbox" type="checkbox" />
  <label for="myCheckbox">Lorem ipsum dolor sit amet</label>
</div>

Lorem ipsum dolor sit amet

Code pattern {: #codepattern }

A component that displays a demo and code snippets side by side, organized in tabs.

Component height is determined by the code snippet with the most code lines.

To change the component height, specify the height value in pixels in the shortcode.

{% raw %}{% CodePattern 'pattern-id', optional-height-in-px %}{% endraw %}

{% CodePattern 'example-set/example-pattern', 500 %}

You can embed one of the existing patterns (from /content/en/patterns/ directory) or add a new one. Check out the examples and documentation on how to write new code patterns.

Codepen {: #codepen }

If you don't want to use your personal account, you can use the web-dev-codepen-external account to create a Codepen. Speak to a member of the tech writing team to get access to the login and password.

{% raw %}{% Codepen {
  user: 'robdodson',
  id: 'GRroyyX',
  height: 300,
  theme: 'dark',
  tab: 'css,result',
  allow: ['geolocation']
} %}{% endraw %}

{% Codepen { user: 'robdodson', id: 'GRroyyX', height: 300, theme: 'dark', tab: 'css,result', allow: ['geolocation'] } %}

{% include '../../../../../../types/site/_includes/components/Codepen.d.ts' %}

Columns

Any elements can be placed in a two-column layout by wrapping them in a <div class="switcher"> element. At smaller viewport sizes, elements in a two-column layout will shift to a stacked arrangement.

Detailed specification

<div class="switcher">
  <figure>
    <img src="./image-small.png" alt="">
    <figcaption>
      Small image.
    </figcaption>
  </figure>
  <figure>
    <img src="./image-small.png" alt="">
    <figcaption>
      Small image.
    </figcaption>
  </figure>
</div>

{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/amwrx4HVBEVTEzQspIWw.png", alt="", width="800", height="155" %}

Small image.

{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/amwrx4HVBEVTEzQspIWw.png", alt="", width="800", height="155" %}

Small image.

Code

See the Code post.

Compare

{% raw %}&#123;% Compare 'worse' %&#125;
&#96;&#96;&#96;text
Bad code example
&#96;&#96;&#96;
&#123;% endCompare %&#125;

&#123;% Compare 'better' %&#125;
&#96;&#96;&#96;text
Good code example
&#96;&#96;&#96;
&#123;% endCompare %&#125;{% endraw %}

{% Compare 'worse' %}

Bad code example

{% endCompare %}

{% Compare 'better' %}

Good code example

{% endCompare %}

Compare with caption

{% raw %}{% Compare 'worse' %}
```text
Bad code example
```

{% CompareCaption %}
Explanation of why `example` is bad.
{% endCompareCaption %}

{% endCompare %}

{% Compare 'better' %}
```text
Good code example
```

{% CompareCaption %}
Explanation of why `example` is good.
{% endCompareCaption %}

{% endCompare %}{% endraw %}

{% Compare 'worse' %}

Bad code example

{% CompareCaption %} Explanation of why example is bad. {% endCompareCaption %}

{% endCompare %}

{% Compare 'better' %}

Good code example

{% CompareCaption %} Explanation of why example is good. {% endCompareCaption %}

{% endCompare %}

Compare with custom labels

{% raw %}&#123;% Compare 'worse', 'Unhelpful' %&#125;
Lorem ipsum [dolor sit amet](#), consectetur adipiscing elit. Proin dictum a
massa sit amet ullamcorper. `Suspendisse` auctor ultrices ante, nec tempus
nibh varius at.
&#123;% endCompare %&#125;

&#123;% Compare 'better', 'Helpful' %&#125;
Lorem ipsum [dolor sit amet](#), consectetur adipiscing elit. Proin dictum a
massa sit amet ullamcorper. `Suspendisse` auctor ultrices ante, nec tempus
nibh varius at.
&#123;% endCompare %&#125;{% endraw %}

{% Compare 'worse', 'Unhelpful' %} Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa sit amet ullamcorper. Suspendisse auctor ultrices ante, nec tempus nibh varius at. {% endCompare %}

{% Compare 'better', 'Helpful' %} Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa sit amet ullamcorper. Suspendisse auctor ultrices ante, nec tempus nibh varius at. {% endCompare %}

Compare in columns

<div class="switcher">
{% raw %}{% Compare 'worse' %}
```text
Bad code example
```

{% CompareCaption %}
Explanation of why `example` is bad.
{% endCompareCaption %}

{% endCompare %}

{% Compare 'better' %}
```text
Good code example
```

{% CompareCaption %}
Explanation of why `example` is good.
{% endCompareCaption %}

{% endCompare %}{% endraw %}
</div>

{% Compare 'worse' %} ```text Bad code example ```

{% CompareCaption %} Explanation of why example is bad. {% endCompareCaption %}

{% endCompare %}

{% Compare 'better' %}

Good code example

{% CompareCaption %} Explanation of why example is good. {% endCompareCaption %}

{% endCompare %}

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Enim necessitatibus incidunt harum reprehenderit laboriosam labore consequuntur quod. Doloribus, deleniti! Atque aliquam facilis labore odio similique provident illo culpa assumenda perspiciatis.

Details

Basic details component

{% raw %}&#123;% Details %&#125;

&#123;% DetailsSummary %&#125;
Details _summary_
&#123;% endDetailsSummary %&#125;

Lorem ipsum [dolor sit amet](#), consectetur adipiscing elit. Proin dictum a massa
sit amet ullamcorper. `Suspendisse` auctor ultrices ante, nec tempus nibh varius
at.
&#123;% endDetails %&#125;{% endraw %}

{% Details %}

{% DetailsSummary %} Details summary {% endDetailsSummary %}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa sit amet ullamcorper. Suspendisse auctor ultrices ante, nec tempus nibh varius at.

{% endDetails %}

Details component with preview

{% raw %}&#123;% Details %&#125;

&#123;% DetailsSummary %&#125;
Details _summary_
This is an optional preview. Make your preview text match the first paragraph
of your panel text.
&#123;% endDetailsSummary %&#125;

Lorem ipsum [dolor sit amet](#), consectetur adipiscing elit. Proin dictum a massa
sit amet ullamcorper. `Suspendisse` auctor ultrices ante, nec tempus nibh varius
at.
&#123;% endDetails %&#125;{% endraw %}

{% Details %}

{% DetailsSummary %} Details summary This is an optional preview. Make your preview text match the first paragraph of your panel text. {% endDetailsSummary %}

This is an optional preview. Make your preview text match the first paragraph of your panel text.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa sit amet ullamcorper. Suspendisse auctor ultrices ante, nec tempus nibh varius at.

{% endDetails %}

Details component with custom heading level

The default heading level is h2. To ensure the Details component is in the correct place in the page hierarchy, add a custom heading argument to the DetailsSummary shortcode. For example, if the component is in an h2 section, use an h3 heading.

{% raw %}&#123;% Details %&#125;

&#123;% DetailsSummary 'h3' %&#125;
Details _summary_
&#123;% endDetailsSummary %&#125;

Lorem ipsum [dolor sit amet](#), consectetur adipiscing elit. Proin dictum a massa
sit amet ullamcorper. `Suspendisse` auctor ultrices ante, nec tempus nibh varius
at.
&#123;% endDetails %&#125;{% endraw %}

{% Details %}

{% DetailsSummary 'h3' %} Details summary {% endDetailsSummary %}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa sit amet ullamcorper. Suspendisse auctor ultrices ante, nec tempus nibh varius at.

{% endDetails %}

Details component in open state

The Details component is closed by default. If for some reason you want it open, add the open argument to the Details shortcode.

{% raw %}&#123;% Details 'open' %&#125;

&#123;% DetailsSummary %&#125;
Details _summary_
&#123;% endDetailsSummary %&#125;

Lorem ipsum [dolor sit amet](#), consectetur adipiscing elit. Proin dictum a massa
sit amet ullamcorper. `Suspendisse` auctor ultrices ante, nec tempus nibh varius
at.
&#123;% endDetails %&#125;{% endraw %}

{% Details 'open' %}

{% DetailsSummary %} Details summary {% endDetailsSummary %}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa sit amet ullamcorper. Suspendisse auctor ultrices ante, nec tempus nibh varius at.

{% endDetails %}

Glitches {: #glitches }

Create a Glitch

Remix the web-dev-hello-webpage or web-dev-hello-express template.
Click Project options and update the description of the Glitch.
Update README.md.
Update package.json (if it exists).
Add the project to the web.dev team on Glitch.
Set the avatar of the project to the web.dev logo.

Embed a Glitch

{% raw %}

{% Glitch {
  id: 'tabindex-zero',
  path: 'index.html',
  previewSize: 0,
  allow: []
} %}

<!-- Or just the Glitch ID -->

{% Glitch 'tabindex-zero' %}

{% endraw %}

It's OK to adjust the height of the Glitch wrapper element if you need more or less space.

Shortcode object fields allow for modifying how the embed is presented:

{string | string[]} allow? List of feature policies of an IFrame either as an array of strings, or as a ; separated list. By default the following policies are enabled:
- 'camera', 'clipboard-read', 'clipboard-write', 'encrypted-media', 'geolocation', 'microphone', 'midi'
{string} id ID of Glitch project.
{string} path? Lets you specify which source code file to show.
{number} previewSize? Defines what percentage of the embed should be dedicated to the preview, default is 100.
{number} height? Height, in pixels, of the Glitch wrapper element.

{% if site.percy %}

Glitch iframe placeholder

{% else %} {% Glitch { id: 'tabindex-zero', path: 'index.html' } %} {% endif %}

Images

See the Images and video post.

Instructions

The Instruction component provides commonly used instructions for Glitch and Chrome DevTools. Use the Instruction component whenever possible to help ensure content consistency and make cross-site maintenance easier.

By default, each instruction is placed in an unordered list item. To use an ordered list, add an ol argument to the shortcode. To use a paragraph, add a none argument. See the Lists section of the Grammar, mechanics, and usage post for information about when to use each list type.

Instructions can be strung together to create multi-step processes.

Glitch instructions

The most common Glitch instructions explain how to preview a Glitch sample app by using the remix and preview arguments in two consecutive Instruction shortcodes:

{% raw %}{% Instruction 'remix' %}
{% Instruction 'preview' %}{% endraw %}

{% Instruction 'remix', 'ol' %} {% Instruction 'preview', 'ol' %}

To explain how to open the Glitch console, use the console argument:

{% Instruction 'console', 'ol' %}

To explain how to create a new file in a Glitch, use the create argument:

{% Instruction 'create', 'ol' %}

To explain how to view a Glitch's source code, use the source argument:

{% Instruction 'source' %}

Reloading the page

There are three ways to instruct users to reload the page.

If users are reloading an app, use the reload-app argument:

{% Instruction 'reload-app' %}

If users are reloading a traditional web page, use the reload-page argument:

{% Instruction 'reload-page' %}

If users are reloading a page for the purpose of profiling, use the start-profiling argument:

{% Instruction 'start-profiling' %}

DevTools instructions

Instruct users how to access any tab in DevTools by using the devtools-tabName argument in the Instruction shortcode. For example, here are the instructions for the Performance tab:

{% Instruction 'devtools-performance', 'ol' %}

If you just need users to open DevTools, use the devtools argument:

{% Instruction 'devtools' %}

To tell users how to open the DevTools Command menu, use the devtools-command argument:

{% Instruction 'devtools-command', 'ol' %}

To tell users how to disable the cache, use this sequence:

{% raw %}{% Instruction 'devtools-network', 'ol' %}
{% Instruction 'disable-cache', 'ol' %}{% endraw %}

{% Instruction 'devtools-network', 'ol' %} {% Instruction 'disable-cache', 'ol' %}

Instruct users how to run an audit in Lighthouse by using the audit-auditName argument in the Instruction shortcode. For example, here are the instructions for the Performance audit:

{% Instruction 'audit-performance', 'ol' %}

Labels

Labels can be used to display a filename associated with a code snippet.

{% raw %}{% Label %}filename.js:{% endLabel %}{% endraw %}

```js
console.log('hello');
```

{% Label %}filename.js:{% endLabel %}

console.log('hello');

Lists

See the Lists section of the Grammar, mechanics, and usage post for information about when to use each list type.

Use standard Markdown syntax for lists: 1. for ordered lists and - for unordered lists.

Ordered list

1. Lorem ipsum dolor sit amet…
1. Lorem ipsum dolor sit amet…
1. Lorem ipsum dolor sit amet…

Lorem ipsum dolor sit amet…
Lorem ipsum dolor sit amet…
Lorem ipsum dolor sit amet…

Unordered list

- Lorem ipsum dolor sit amet…
- Lorem ipsum dolor sit amet…
- Lorem ipsum dolor sit amet…

Lorem ipsum dolor sit amet…
Lorem ipsum dolor sit amet…
Lorem ipsum dolor sit amet…

Definition list

First Term
: This is the definition of the first term.

Second Term
: This is one definition of the second term.
: This is another definition of the second term.

First Term : This is the definition of the first term.

Second Term : This is one definition of the second term. : This is another definition of the second term.

Stats

Use the Stats component to call out important statistics about a product or service discussed in a post. (Stats are primarily used in case studies.)

Include no more than four statistics in a single Stats component to avoid layout issues.

Detailed specification

<ul class="stats">
  <div class="stats__item">
    <p class="stats__figure">
      30
      <sub>%</sub>
    </p>
    <p>Lower cost per conversion</p>
  </div>
  <div class="stats__item">
    <p class="stats__figure">
      13
      <sub>%</sub>
    </p>
    <p>Higher CTR</p>
  </div>
  <div class="stats__item">
    <p class="stats__figure">
      4
      <sub>x</sub>
    </p>
    <p>Faster load times</p>
  </div>
</ul>

30 _%

Lower cost per conversion

13 _%

Higher CTR

4 _x

Faster load times

Stats component with applied utility class bg-state-good-bg color-state-good-text:

30 _%

Lower cost per conversion

13 _%

Higher CTR

4 _x

Faster load times

Tables

Use the markup below to create a table. Do not use Markdown syntax; it doesn't include the wrapper element needed to ensure correct whitespace around the table.

Detailed specification

<div class="table-wrapper scrollbar">
  <table>
    <thead>
      <tr>
        <th>Image Format</th>
        <th>Lossy Plugin(s)</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>JPEG</td>
        <td><a href="#">imagemin-mozjpeg</a></td>
      </tr>
      <tr>
        <td>PNG</td>
        <td><a href="#">imagemin-pngquant</a></td>
      </tr>
      <tr>
        <td>GIF</td>
        <td><a href="#">imagemin-giflossy</a></td>
      </tr>
    </tbody>
    <caption>
      Imagemin plugins for filetypes.
    </caption>
  </table>
</div>

Imagemin plugins for filetypes.
Image Format	Lossy Plugin(s)
JPEG	imagemin-mozjpeg
PNG	imagemin-pngquant
GIF	imagemin-giflossy

A table with the cell content vertically aligned by data-alignment="top" exception.
Tool	Summary
Lighthouse	Budgets for different types of resources based on their size or count
webpack	Budgets based on sizes of assets generated by webpack Checks uncompressed sizes

Table using a `code` element.
Option 1	Option 2
`@font-face { font-family: Helvetica; }`	`@font-face { font-family: Helvetica; font-display: swap; }`

Tables scroll when their width is larger than that of the content column.
Network	Device	JS	Images	CSS	HTML	Fonts	Total	Time to Interactive budget
Slow 3G	Moto G4	100	30	10	10	20	~170 KB	5s
Slow 4G	Moto G4	200	50	35	30	30	~345 KB	3s
WiFi	Desktop	300	250	50	50	100	~750 KB	2s

Tabs

Use web-tabs web component to display content that refers to different platforms or languages. Each child of the web-tabs component will become a separate tab. Use data-label attribute to set the tab's title. You can use markdown inside the tab, e.g. the code blocks.

{% raw %}
<web-tabs>
  <div data-label="html">
    ```html
    <p>I'm html</p>
    ```
  </div>
  <div data-label="css">
    ```css
    .class { border: 0; }
    ```
  </div>
</web-tabs>
{% endraw %}

<p>I'm html</p>

.class { border: 0; }

Tooltips

Use tooltips to provide information about UI controls that are too small to have a label

Detailed specification

<div class="tooltip" data-alignment="">
  <button class="fab" aria-labelledby="mytooltip">
    {% raw %}{% include "icons/plus.svg" %}{% endraw %}
  </button>
  <span class="tooltip__content" role="tooltip" id="mytooltip"
    >Standard alignment</span
  >
</div>

Video / YouTube {: #video }

See the Images and video post.

这篇文档对你有帮助吗？

想留言或继续讨论？请到 Cyberforums 赛博论坛参与。参与讨论 / 回复

index

Accessible responsive design

Accessible tap targets

Color and contrast accessibility

Content reordering

Control focus with tabindex

Headings and landmarks

Keyboard access fundamentals

Labels and text alternatives

Semantics and screen readers

Style focus

Use semantic HTML for easy keyboard wins

What is accessibility?

index

Audit your Angular app's accessibility with codelyzer

Create a Progressive Web App with the Angular CLI

Optimize Angular's change detection

Get started: optimize an Angular application

Performance budgets with the Angular CLI

Precaching with the Angular service worker

Route-level code splitting in Angular

Route preloading strategies in Angular

Virtualize large lists with the Angular CDK

index

Examples of high-performance CSS animations

How to create high-performance CSS animations

Why are some animations slow?

Baseline

0h h1

Making 100,000 Stars

Take the 2021 scroll survey to help improve scrolling on the web

2021 Scroll Survey Report

Case Study - Page Flip Effect from 20thingsilearned.com

3D and CSS

5miles

6 CSS snippets every front-end developer should know in 2023

Spooktacular HTML5 Pumpkin

Accessibility for teams

Accessibility tips for web developers

Profiling your WebGL Game with the about:tracing flag

CSS `accent-color`

Accessibility

Accessibility Week

Adapting typography to user preferences with CSS

Adaptive loading: improving web performance on slow devices

Add touch to your site

Magazine-like layout for the web with CSS regions and exclusions

How Google improved ads performance with stale-while-revalidate

Adsy.me

Advancing the web framework ecosystem

Madeon Adventure Machine

A modern web experience on Adobe Experience Manager with WorkBox

Agrofy: A 70% improvement in LCP correlated to a 76% reduction in load abandonment

AirHorner.com

Smart Lock for AliExpress

Alibaba

AliExpress

Writing an AngularJS App with Socket.IO

Animating Between Views

Animating Modal Views

Animations and performance

Antialiasing 101

An API for fast, beautiful web fonts

Get things done quickly with app shortcuts

A beginner's guide to using the application cache

Preparing for AppCache removal

Positioning virtual objects in real-world views

ARIA labels and relationships

|

Virtual Art Sessions

George.com enhances the mobile customer experience with new Progressive Web App

New aspect-ratio CSS property supported in Chromium, Safari Technology Preview, and Firefox Nightly

Simple asset management for HTML5 games

Asymmetric animation timing

Unblocking clipboard access

Asynch JS - The power of $.Deferred

Async functions: making promises friendly

Using asynchronous web APIs from WebAssembly

@property: giving superpowers to CSS variables

Synchronize audio and video playback on the web