Hey, we’re back with weekly revises about the browser landscape from Sime Vidas.
In this week’s update, the CSS: not pseudo class can accept complex selectors, how to disable smooth scrolling where there is” Find on sheet …” in Chrome, Safari’s support for there media attribute on
Let’s jump into the news…
The enhanced: not() pseudo-class enables brand-new kinds of potent selectors
After a years-long wait, the enhancement of: not() pseudo-class has finally shipped in Chrome and Firefox, and is now supported in all major browser machines. This new version of: not() countenances complex selectors and even entire selector lists.
For example, you can now select all
elements that are not contained within an
/* select all
s that are progenies of
s that are not heirs of
In another example, you may want to select the first register component that does not have the hidden dimension( or any other attribute, for that matter ). The best selector for this task would be: nth-child( 1 of: not ([ secreted ])), but the of notation is still only supported in Safari. Luckily, this unsupported selector can now be re-written working simply the enhanced: not() pseudo-class.
/* select all non-hidden points that are not preceded by a non-hidden sibling( i.e ., adopt the first non-hidden child */ :not([hidden]):not(:not([hidden])~: not ([ secreted ]))
The HTTP Refresh header can be an accessibility controversy
The HTTP Refresh header( and equivalent HTML < meta > tag) is a very old and widely supported non-standard piece that apprise the browser to automatically and sporadically reload the sheet after a given amount of time.
According to Google’s data, the tag is used by a whopping 2. 8% of sheet quantities in Chrome( down from 4 % a year ago ). All these websites gamble failing various success criteria of the Web Content Accessibility Guidelines( WCAG ):
If the time interval is too short, and there is no way to turn auto-refresh off, people who are blind will not have enough time to make their screen books spoke the sheet before the sheet refreshes accidentally and causes the screen reader to begin reading at the top.
However, WCAG does allow using the label solely with the importance 0 to perform a client-side redirect in the case that the author does not control the server and hence cannot accomplish a proper HTTP redirect.
How to disable smooth scrolling for the “Find on page…” feature in Chrome
CSS scroll-behavior: smooth is supported in Chrome and Firefox. When this declaration is set on the element, the browser scrolls the page “in a smooth pattern.” It is a matter of navigations, service standards scrolling APIs( e.g ., window.scrollTo ( top: 0 )), and scroll clicking operations( CSS Scroll Snap ).
Unfortunately, Chrome erroneously retains smooth moving enabled even when the user performs a text search on the sheet( “Find on page…” feature ). Some people find this annoying. Until that is fixed, you can use Christian Schaefer’s clever CSS workaround that effectively disables smooth scrolling for the “Find on page…” feature only.
@keyframes smoothscroll1
from,
to
scroll-behavior: smooth;
@keyframes smoothscroll2
from,
to
scroll-behavior: smooth;
html
animation: smoothscroll1 1s; html: focus-within
animation-name: smoothscroll2;
scroll-behavior: smooth;
In the following demo , notice how clicking the links moves the sheet smoothly while searching for the words “top” and “bottom” moves the page instantly.
Safari still supports the media attribute on video informants
With the HTML < video > aspect, it is possible to show multiple video sources of different MIME characters and encodings. This allows websites to use more modern and efficient video formats in supporting browsers, while at the same time ensuring a fallback for other browsers.
In the past, browsers also supported the media attribute on video beginnings. For illustration, a web page could laden a higher-resolution video if the user’s viewport exceeded a certain size.
The above syntax is in fact still supported in Safari today, but it was removed from other browsers around 2014 because it was not considered a good piece 😛 TAGEND
It is not appropriate for choosing between low-grade solving and high settlement because the environment can change( e.g ., the user might fullscreen the video after it has begun loading and want high-pitched settlement ). Also, bandwidth is not available in media queries, but even if it was, the user agent is in a better position to determine what is appropriate than the author.
Scott Jehl( Filament Group) argues that the removal of this facet was a mistake and that websites should be able to deliver responsive video roots employing
For every video we embed in HTML, we’re stuck with the choice of dishing source records that are potentially too large or small for many users’ devices … or resorting to more complicated server-side or written or third-party solutions to deliver a correct size.
Scott has written a proposal for the reintroduction of media in video
The CSS clip-path: path() purpose ships in Chrome
It wasn’t mentioned in the latest “New in Chrome 88 ” article, but Chrome just shipped the course() run for the CSS clip-path dimension, which means that this feature is now supported in all three major browser engines( Safari, Firefox, and Chrome ).
The path() perform is defined in the CSS Shapes module, and it countenances an SVG path cord. Chris calls this the ultimate syntax for the clip-path property because it can clip an element with “literally any shape.” For example, here’s a photo clipped with a middle influence 😛 TAGEND
The post Weekly Platform News: The: not() pseudo-class, Video Media Query, clip-path: course() Support showed first on CSS-Tricks.
You can support CSS-Tricks by being an MVP Supporter.
Read more: css-tricks.com
Recent Comments