What's this?

Question

Can anyone please help me to understand what's going on here?

Html:

<div style="--aspect-ratio:16/9;">

<iframe width="560" height="315" src="https://www.youtube.com/embed/2N_sUmpjzZk" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

CSS:

[style*="--aspect-ratio"] {
> :first-child { width: 100%; }
> img { height: auto; }

@supports (--a:b) {
position: relative;
&::before {
content: "";
display: block;
padding-bottom: calc(100% / (var(--aspect-ratio)));
}

Or where can I get some information about this?

Answer 1

Calviղ yes, that's SCSS 😊

Rezowan Islam Rizvy (RIR) it's a preprocessor, it gives CSS superpowers :) it's based on Ruby and you need to compile it for browsers to be able to run it. But basically that code snippet is using mixins (like functions) and nesting syntax. Learn more about it here: https://sass-lang.com/guide

Answer 2

Rezowan Islam Rizvy (RIR)
Type @(name of the person) and choose it from the list that appears.

Answer 3

For aspect ratio - scroll down to “The psuedo element tactic:

https://css-tricks.com/aspect-ratio-boxes/

The iframe tag is just being used to add a youtube video.

Answer 4

thanks a lot Stellar Fox .

and can you say, why there's written "mod" beside your name?
Pao also have it.
but me and Calviղ don't have.

Answer 5

Rezowan Islam Rizvy (RIR)
https://code.sololearn.com/WAEiIa4nsNz4/?ref=app
Check this.

Answer 6

/* the following set the style attribute which contains word "--aspect-ratio" */
[style*="--aspect-ratio"] {
> :first-child { width: 100%; } /* first element */
> img { height: auto; }

/* the following style is for browsers support css variable */
@supports (--a:b) {
position: relative;
&::before {
content: "";
display: block;
padding-bottom: calc(100% / (var(--aspect-ratio)));
}

I think this is CSS preprocessing codes, can it actually work from CSS directly or is this a codepen.io code ?

Answer 7

yes calvin it's a codepen.io code.

Answer 8

Thanks a lot pao.
But How to mention somebody on comment? (like you did)