6 Colors to use instead of FFFFFF ⚪ For Background
__________
OFF White - #FAF9F6
__________
Alice Blue - #F0F8FF
__________
Pearl - #FBFCF8
__________
Egg Shell - #FFF9E3
__________
Coconut - #FFF1E6
__________
Parchment - #FBF5DF
An introduction to @scope
In CSS, @scope is a new at-rule that allows you to define a scope for your styles, meaning you can limit the application of certain styles to specific parts of your HTML. This is useful for avoiding conflicts and ensuring that styles do not unintentionally affect elements outside their intended section. For example, if you want certain styles to apply only within a specific section of your webpage, you can wrap those styles in an @scope block, specifying the container element. This way, the styles within the @scope block will only apply to elements inside the specified container, making your CSS more modular and easier to manage.
In your CSS file, you can use the @scope rule to apply styles specifically to elements within each section:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>@scope Example</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div id="section1"> <p>This is section 1.</p> </div> <div id="section2"> <p>This is section 2.</p> </div> </body> </html>
In this example:
@scope (#section1) {
p {
color: blue;
font-size: 20px;
}
}
@scope (#section2) {
p {
color: green;
font-size: 16px;
}
}
- The @scope (#section1) block applies the styles (blue text color and 20px font size) only to the <p> elements inside the <div> with the id="section1".
- The @scope (#section2) block applies different styles (green text color and 16px font size) only to the <p> elements inside the <div> with the id="section2".
This means the paragraph in section1 will be blue and larger, while the paragraph in section2 will be green and slightly smaller. The @scope rule helps keep styles contained and prevents them from affecting other parts of your webpage.
An introduction to @supports
The @supports rule in CSS is used to apply styles only if the browser supports specific CSS features. This is helpful for ensuring that your styles are compatible with the capabilities of the user’s browser, allowing you to provide fallbacks or enhanced styles based on the presence of certain CSS properties or values.
Basic Usage
The @supports rule takes a condition that checks for support of a particular CSS feature. If the condition is true, the styles inside the @supports block will be applied.
Example
Let's say you want to use the CSS Grid layout but only if the browser supports it. You can use @supports to check for this feature:
@supports (display: grid) {
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
}
@supports not (display: grid) {
.container {
display: flex;
flex-wrap: wrap;
}
.container > div {
flex: 1 0 30%;
margin: 5px;
}
}
Explanation
- Check for Grid Support: The @supports (display: grid) block checks if the browser supports CSS Grid. If it does, the styles inside this block will be applied, setting up a grid layout with three equal columns and a 10px gap between them.
- Fallback for Non-Supporting Browsers: The @supports not (display: grid) block provides a fallback for browsers that do not support CSS Grid. In this case, it uses Flexbox to create a responsive layout with wrapping elements and margins.
Advanced Usage
You can also use logical operators such as and, or, and not within the @supports rule to combine multiple conditions.
Example with Multiple Conditions
@supports (display: grid) and (gap: 10px) {
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
}
@supports (display: flex) and not (gap: 10px) {
.container {
display: flex;
flex-wrap: wrap;
}
.container > div {
flex: 1 0 30%;
margin: 5px;
}
}
Explanation
- Combined Conditions: The @supports (display: grid) and (gap: 10px) block applies styles only if both conditions (support for display: grid and gap: 10px) are met.
- Mixed Conditions: The @supports (display: flex) and not (gap: 10px) block applies styles if display: flex is supported but gap: 10px is not.
Using @supports helps you write more robust and adaptable CSS by allowing you to tailor your styles to the capabilities of the user's browser.
CSS Viewport Height Units
In CSS, vh (viewport height) and its variants (lvh, svh, dvh) are units used to specify sizes relative to the viewport's height. Here's what each of them means:
vh (Viewport Height)
- 1vh is equal to 1% of the viewport's height.
- Example: height: 100vh; makes an element as tall as the entire viewport.
- Issue: Some browsers (especially on mobile) include the browser's address bar in the viewport height calculation, which can lead to unexpected results.
lvh (Large Viewport Height)
- lvh stands for large viewport height, representing the largest possible height of the viewport.
- Typically, it corresponds to the viewport height when the address bar is fully hidden (e.g., after scrolling down on mobile).
- Example: height: 100lvh; ensures an element uses the maximum possible viewport height.
svh (Small Viewport Height)
- svh stands for small viewport height, representing the smallest possible height of the viewport.
- Typically, it corresponds to the viewport height when the browser’s address bar is fully visible (e.g., when the page is first loaded on mobile).
- Example: height: 100svh; makes sure an element adapts to the minimum viewport height.
dvh (Dynamic Viewport Height)
- dvh stands for dynamic viewport height, which dynamically adjusts as the viewport changes (e.g., when the browser's address bar expands or collapses).
- This is the most responsive option for mobile browsers.
- Example: height: 100dvh; ensures an element resizes fluidly as the viewport height changes.
Dark Mode Toggle and prefers-color-scheme
WARNING! This demo is using @container style() and :has to update preferred color-scheme. Only in latest Chrome.
HTML
<h1>Hello Darkness, My Old Friend</h1> <p><strong>WARNING!</strong> This demo is using <code>@container style()</code> and <code>:has</code> to update preferred color-scheme. <br>Only in latest Chrome.</p> <fieldset class="toggle-group" id="colorScheme"> <label> <input type="radio" name="color-scheme" id="color-scheme-light" value="0" data-sr> Light </label> <label> <input type="radio" name="color-scheme" value="auto" checked data-sr> Auto </label> <label> <input type="radio" name="color-scheme" id="color-scheme-dark" value="1" data-sr> Dark </label> </fieldset>
CSS
:where(html) {
--darkmode: 0;
container-name: root;
container-type: normal;
}
body {
--background-color: #fff;
--text-color: #222;
background-color: var(--background-color);
color: var(--text-color);
color-scheme: light dark;
font-family: ui-sans-serif, system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
html {
--darkmode: 1;
}
}
@media (prefers-color-scheme: light) {
html {
--darkmode: 0;
}
}
html:has(#color-scheme-light:checked) {
--darkmode: 0;
}
html:has(#color-scheme-dark:checked) {
--darkmode: 1;
}
@container root style(--darkmode: 1) {
body {
--background-color: hsl(228, 5%, 15%);
--text-color: hsl(228, 5%, 80%);
}
}
/* DEMO */
.toggle-group {
border: 2px solid #ccc;
border-radius: 24px;
inline-size: fit-content;
padding: 3px;
}
.toggle-group label {
border-radius: 21px;
cursor: pointer;
display: inline-flex;
padding: 0.5em 1em;
text-align: center;
user-select: none;
}
.toggle-group label:has(input:checked) {
background-color: #ccc;
color: #333;
}
[data-sr] {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}