Posts tagged with “css”

We can query the currently active fallback position and apply different styles with CSS only.

An in-depth look at the new capabilities of the native disclosure element.

Extend the reach of your buttons to support keyboard and screen reader users.

A step by step guide, using the Popover API and CSS Anchor Positioning.

Harness the power of native buttons, dialogs, form controls, and disclosure widgets.

Use the ::placeholder CSS pseudo-element to improve your website's accessibility.

Leveraging the power of modern web features, you can quickly create awesome navigation menus.

Learn how to animate dialogs and popovers, correctly nest them, and close dialogs on backdrop click.

Learn how to use native scoping and create code that is easier to read and debug.

Create an accessible, universal focus indicator that works in light and dark mode.

Inform the user of important events without interrupting their current task.

A quick overview of the new success criteria and some practical examples for specific use cases.

Building accessible menus, tooltips, and date pickers has never been this easy.

An inline SVG image can be easily customized with CSS and is highly flexible.

Markup any list of key-value pairs to make your code more readable and convey semantic information to screen readers.

Create responsive, reusable components that adapt to the available space of their container.

Nested grid containers can align their rows and columns using the subgrid feature.

Using Angular, ARIA attributes and some powerful CSS, we create an accessible, responsive web carousel.

One year ago I started my blog about web development and accessibility. A retrospective and a look ahead.

Semantic HTML is easy to read and maintain, keyboard operable by default, and works well with CSS.

Using the button element together with the switch role creates an accessible experience.

Find out how forced colors mode works for websites and how to improve the user experience.

Structure your styles and avoid pesky conflicts with specificity or order of appearance.

The dialog element is easy to use and accessible by default, apart from some minor issues.

Learn how to apply custom styling to the native HTML file input element.

Approach the topic step by step and be open to new perspectives.

How to apply custom styling to native form controls and create accessible web forms with a consistent look across all platforms.

Use the speak-as CSS property to tell screen readers how to read numbers and abbreviations.

Fancy design or accessibility? The :focus-visible pseudo-class enables you to support keyboard-only users and satisfy clients.