Search for a command to run...
Check if a CSS feature is ready in a browser or not and apply code for both scenarios
No comments yet. Be the first to comment.
The :has selector can be used to make a 100% iframe's container to be also 100%
Catch the first element type that's a child of a parent element
Use HTML5 properties and advanced CSS attributes for validation
Demo : http://s3.css.co.in/demo/mega-menu.html Code : https://gist.github.com/anjanesh/876b781b69fff9598fd73ffeda4b9318 Sorry for no explanation here. #top-menu-1 > div > a + div:hover has to be displayed as block too. For people who know CSS, I thin...
CSS
13 posts
Styles of the Web
In order to check if some CSS property is supported in a browser or not we can make use of the @supports API which itself is supported by all browsers except IE and Opera Mini (https://caniuse.com/css-supports-api) - so we’re good here.
So let take one good example of a CSS feature that many front-end developers have been waiting for.
It looks like grid-template-rows: masonry; may come to browsers this year. The latest Safari Technical Preview seems to have support for this though I couldn’t get it to work on my Safari Tech Preview on my macOS Sequoia 15.7.3 - not sure if masonry support is only for Tahoe’s version of Safari Tech Preview.
To check if your browser supports grid-template-rows: masonry we can use it in CSS like this :
@supports (grid-template-rows: masonry)
{
}
We can place any CSS within the block and the good part is we can also apply CSS to browsers that don’t support grid-template-rows: masonry - by using the not keyword.
@supports not (grid-template-rows: masonry)
{
}
You can get Firefox to support grid-template-rows: masonry by enabling layout.css.grid-template-masonry-value.enabled to true in about:config.
Here’s the sample CSS code :
.container
{
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
grid-template-rows: masonry;
}
.container > div
{
padding: 1em;
background-color: #f0f0f0;
}
@supports (grid-template-rows: masonry)
{
.container > div
{
border: 2px solid red;
}
}
@supports not (grid-template-rows: masonry)
{
.container > div
{
border: 2px solid green;
}
}
And here’s the corresponding HTML:
<div class="container">
<div>Item 1</div>
<div>Item 2.1<br/>Item 2.2</div>
<div>Item 3.1<br/>Item 3.2<br/>Item 3.3</div>
<div>Item 4</div>
</div>
This will show like this for no masonry support :
And like this for browsers that do support masonry :
Notice the difference - for one: the colours are different - and most importantly, the layout is as per the height of the content of each item cell and not uniform.
Demo : https://anjanesh.s3.us-east-1.amazonaws.com/demo/supports.html
Reference : https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Grid_layout/Masonry_layout