Skip to main content

Detecting CSS selector support

You might already be aware of how we can use feature detection in CSS to check whether a particular property and value combination is supported. This is a pretty smart way to go about writing robust CSS that caters for users with a whole range of browsers and devices with different capabilities, and is infinitely preferable to user agent sniffing. We can check whether a browser supports aspect-ratio, say, and provide a fallback in cases where lack of support would hamper the user experience. .some-element { max-height: 200px;}@supports (aspect-ratio: 1) { .some-element { aspect-ratio: 1; max-height: none; }} This particular block of code sets a max-height on an element, except when aspect-ratio is supported, when we’ll use that instead. We could make this a bit more concise by using the not keyword, which essentially reverses the above: We’ll only set a max-hight when aspect-ratio is not supported. .some-element { aspect-ratio: 1;}@supports not (aspect-ratio: 1) { .some-element { max-height: 200px; }} The only problem here is that very old browsers that don’t support feature queries (as well as not supporting aspect-ratio) won’t get the fallback. This is much less of a problem than it used to be, given that feature queries have been well-supported for some time, but worth bearing in mind nonetheless, especially if a lot of your users might be using older devices. It might sound obvious, but it’s worth noting: For @supports to evaluate true, both the property name and the value must be supported. Neither of the expressions inside the parentheses here are valid, meaning that any styles inside the @supports statements will never be applied: @supports (aspect-ratio: red) {}@supports (aspect-ratio) {} We can also combine conditions using the and and or operators, much the same as we might write a media query. The following will apply an aspect ratio only when the browser supports both aspect-ratio and rotate (one of the new CSS transform properties): @supports (aspect-ratio: 1) and (rotate: 30deg) { .some-element { aspect-ratio: 1; }} Detecting selector support CSS has given us some pretty cool selectors recently in the form of pseudo-elements and pseudo-classes. For example, :focus-visible allows us to style an element when it’s focused with a keyboard. Support for :has() has recently landed in Chrome and Safari, which allows us to apply styles to an element as a result of its children. Happily, we can detect support for these selectors using @supports, by prefixing the parentheses with selector. We might want to change the focus style of button when it receives focus from a mouse, but keep the default focus ring when focused with a keyboard, and if the browser does not support :focus-visible. @supports selector(:focus-visible) { button:focus:not(:focus-visible) { outline: 2px solid limegreen; }} (This complex selector doesn’t seem to work in Safari for some reason, despite Safari supporting both @supports selector() and :focus-visible.) There appears to be a slight discrepancy between browser implementations when using more complex pseudo-classes such as :has(): Currently Safari requires :has() to include some other selector, but Chrome does not. @supports selector(:has()) {}@supports selector(:has(.some-element)) {} Browser support @supports selector() is supported in all modern browsers,  » Read More

Like to keep reading?

This article first appeared on css-irl.info. If you'd like to continue this story, follow the white rabbit.

View Full Article
Laravel Vs Symfony: Answering All The Questions To Make a Better Choice

Laravel Vs Symfony: Answering All The Questions To Make a Better Choice

#Dev
How to Channel a Daily Vision into a 20-Year Photography Career

How to Channel a Daily Vision into a 20-Year Photography Career

#Silicon Valley
WordPress Punts Locally Hosted Fonts for Legacy Default Themes to 6.2 Release

WordPress Punts Locally Hosted Fonts for Legacy Default Themes to 6.2 Release

#Web Design
Fresh For Designers

Is the Dynamic Island plain stupid or the next revolutionary UX pattern?

#All

Let's talk about Web Design

The term "web design" describes the layout of websites that are seen online. Instead of software development, it typically refers to the user experience components of website development. The primary focus of web design used to be creating websites for desktop browsers, but from the middle of the 2010s, designing for mobile and tablet browsers has gained significance.

What is a webdesigner?

A web designer is responsible for a website's look, feel, and occasionally even content. For instance, appearance refers to the colors, text, and images utilized. Information's organization and categorization are referred to as its layout. An effective web design is user-friendly, aesthetically pleasing, and appropriate for the target audience and brand of the website. Many websites focus on keeping things simple so that viewers won't be distracted or confused by additional information and functionality. Removing as many potential sources of user annoyance as possible is a crucial factor to take into account because the foundation of a web designer's output is a site that gains and nurtures the trust of the target audience.

Responsive and adaptive design are two of the most popular techniques for creating websites that function well on both desktop and mobile devices. In adaptive design, the website content is fixed in layout sizes that correspond to typical screen sizes, while in responsive design, information moves dynamically based on screen size. A layout that is as consistent as possible across devices is essential to preserving user engagement and trust. Designers must be cautious when giving up control of how their work will appear because responsive design can be challenging in this area. While they might need to diversify their skill set if they are also in charge of the content, they will benefit from having complete control over the final output.

What does a web design worker do?

A web designer is a member of the IT industry who is in charge of planning a website's structure, aesthetic appeal, and usability.

A skilled site designer must possess both technical know-how and creative graphic design abilities. They must be able to envision how a website will seem (its graphical design) and how it will operate (conversion of a design into a working website).

The terms web developer and designer are frequently used interchangeably but erroneously. In order to construct more complex interactions on a website, such as the integration with a database system, a web developer is frequently more likely to be a software developer who works with programming languages.