In most cases, the value of this is determined by how a function is called (runtime binding).
Usage (Context)
Refers to
In a Method
Owner Object (Which invoked method)
Alone
Global Object
@layer
The @layer CSS at-rule declares a cascade layer. Rules within a cascade layer cascade together, giving more control over the cascade to web developers.
@layer utilities {
.padding-sm {
padding: .5rem;
}
.padding-lg {
padding: .8rem;
Specificity
!important > Inline style > ID selector > Class selector > Element selector
CSS Specificity
Pseudo-classes
:root
Selects the root element of the document.
Mostly used to store global rule values using CSS variable as it applies to the root element.
filter()
The filter() method creates a new array of elements that pass the conditional we provide. In other words, if the element passes and returns true, it will be included in the filtered array. And any element that fails or return false, it will be NOT be in the filtered array.
let arr = ['html', 'css', 'js', 'css', 'js'];
function removeDuplicates(data) {
return data.filter((value, index) => arr.indexOf(value) === index);
}
console.log(removeDuplicates(arr));
Attributes
controls
This is a boolean attribute that specifies whether or not to display the audio controls (ie. start/pause button, scroll, volume).
<audio controls></audio>
<!-- OR -->
<audio controls="true"></audio>
Note: If it’s missing, the audio file will not be displayed. Typically, you should always include this. Unless you want to create your own control panel using JavaScript
HTML Image
To show a different image in dark mode.
<picture>
<source srcset="dark.png" media="(prefers-color-scheme: dark)">
<img src="bright.png">
</picture>
CSS
The prefers-color-scheme CSS media feature is used to detect if the user has requested the system use a light or dark color theme.