Easy methods to load css assets conditionally ?

On this planet of internet improvement, CSS performs an important position in styling HTML code. Usually, the CSS code is linked within the head tag of an HTML doc, permitting builders to simply apply kinds to the content material of an internet web page. Nevertheless, there could also be occasions when the specified styling depends on particular circumstances, corresponding to the scale of the viewport or the kind of machine getting used to entry the web site.

In these conditions, it turns into essential to have the power to conditionally alter CSS kinds primarily based on these circumstances. That is the place the facility of CSS conditional styling comes into play. On this article, we are going to delve into varied approaches to conditionally altering CSS kinds, supplying you with the instruments and information wanted to take your internet improvement abilities to the subsequent stage.

Listed here are some approaches to utilizing CSS conditionally:

Utilizing Media Queries.
Utilizing Media Attribute in “fashion” or “hyperlink” tags.
Loading Printer-specific CSS.
Loading CSS primarily based on Darkish/Gentle Mode.

Method 1: Utilizing Media Queries:

Media queries are a function of CSS (Cascading Model Sheets) that allow you to specify totally different kinds for a webpage primarily based on the size of the viewport or the machine getting used. That is helpful for creating responsive designs, that are web sites that may adapt to totally different display screen sizes and machine varieties.

In a media question, the media kind specifies the kind of media that the kinds ought to be utilized to, and the expressions examine for the size of the viewport or the machine getting used. If the media kind and expressions match the traits of the machine, the kinds specified within the media question shall be utilized.

You possibly can seek advice from Media Question to study extra about it.

Instance:

HTML

<!DOCTYPE html>

<html>

<head>

<title>Load CSS conditionally</title>

<fashion>

physique {

background-color: black;

colour: white;

}

@media display screen and (max-width: 900px) {

physique {

background-color: lightgrey;

colour: black;

}

h2 {

colour: inexperienced;

}

</fashion>

</head>

<physique>

<h2>Welcome To GFG</h2>

<p>Now, we're going to study some

stuff concerning CSS.</p>

</physique>

</html>

Output:

Utilizing Media Question for Conditional CSS.

Method 2: Utilizing the “media” attribute in “fashion” or “hyperlink” Components:

Use the “media” attribute of the “hyperlink” factor to specify {that a} stylesheet ought to solely be utilized when sure media varieties or media options are supported. You possibly can set the “media” attribute of the “hyperlink” factor to a media question.

A media question is a CSS3 function that permits you to specify circumstances for when a stylesheet ought to be utilized. The “media” attribute of the “hyperlink” factor takes a media question as its worth. When the circumstances of the media question are met, the kinds within the stylesheet shall be utilized to the web page. When the circumstances aren’t met, the kinds is not going to be utilized.

Syntax:

<fashion media="display screen and (max-width: 800px)"></fashion>

Instance:

HTML

<!DOCTYPE html>

<html>

<head>

<title>Load CSS conditionally</title>

<fashion media="display screen and (max-width: 800px)">

physique {

background-color: black;

colour: white;

}

h2 {

colour: inexperienced;

}

</fashion>

</head>

<physique>

<h2>Welcome To GFG</h2>

<p>Now, we're going to study some stuff concerning CSS.</p>

</physique>

</html>

Output:

Utilizing the “Media” Attribute to load CSS conditionally

You should utilize quite a lot of media varieties and media options in your media queries to specify the circumstances below which a stylesheet ought to be utilized. For instance, you should utilize the print media kind to use kinds solely when the web page is printed, or you should utilize the orientation media function to use kinds solely when the display screen is in panorama orientation.

Method 3: Loading Printer-specific CSS:

In terms of internet improvement, you will need to have the power to regulate kinds primarily based on the output machine getting used to view the web site. That is the place media queries in CSS come into play. Through the use of media queries, you’ve gotten the facility to customise kinds particularly for printing, by focusing on the print output machine attribute.

With media queries, you may apply kinds to your web site which might be particular to the printing, guaranteeing that the content material is offered in the very best approach when printed. It is a highly effective instrument in your internet improvement arsenal that may aid you create a extra streamlined and optimized person expertise, each on display screen and in print.

@media print {
    /* kinds particular to printing go right here */
}

Media queries be certain that the kinds inside them are solely utilized throughout printing. To forestall undesirable kinds from the display screen model from carrying over, it’s really helpful to reset them in your foremost CSS.

Instance:

HTML

<!DOCTYPE html>

<html>

<head>

<title>Load CSS conditionally</title>

<fashion>

@media print {

physique {

colour: black;

}

h2 {

colour: inexperienced;

}

</fashion>

</head>

<physique>

<h2>Welcome To GFG</h2>

<p>Now, we're going to study some

stuff concerning CSS.</p>

</physique>

</html>

Output:

Utilizing “Media Print” to load CSS conditionally

Rationalization: On this instance, the primary CSS units the font dimension and colour for the physique, whereas the printer-specific CSS resets these kinds for the printed model of the web page.

Method 4: Loading CSS primarily based on Darkish/Gentle Mode:

One strategy to dynamically change between darkish and light-weight mode kinds in CSS is through the use of CSS Variables and JavaScript. The strategy entails setting default values to your kinds utilizing CSS Variables, then utilizing JavaScript to toggle between totally different units of kinds primarily based on person choice or machine settings.

Instance: Right here’s a fundamental instance of how this may be carried out:

HTML

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8" />

<meta http-equiv="X-UA-Suitable" content material="IE=edge" />

<meta title="viewport"

content material="width=device-width, initial-scale=1.0" />

<title>Conditional Styling</title>

<fashion>

:root {

--bg-color: #fff;

--text-color: #000;

}

.container {

background-color: var(--bg-color);

colour: var(--text-color);

padding: 20px;

}

[data-mode="dark"] {

--bg-color: #000;

--text-color: #fff;

}

</fashion>

</head>

<physique>

<div class="container">

<p>Welcome to GFG</p>

</div>

<button id="toggle-mode">Toggle Mode</button>

<script>

const toggleBtn = doc.getElementById("toggle-mode");

const container = doc.querySelector(".container");

toggleBtn.addEventListener("click on", () => {

container.dataset.mode =

container.dataset.mode === "darkish" ? "mild" : "darkish";

});

</script>

</physique>

</html>

Output:

Loading CSS Primarily based on Darkish/Gentle Mode.

Rationalization: On this instance, the CSS units default values for the background and textual content colours utilizing CSS Variables. The JavaScript then listens for a click on occasion on the toggle button and switches the data-mode attribute on the container between darkish and light-weight. The CSS then makes use of the [data-mode=”dark”] selector to regulate the values of the CSS Variables primarily based on the data-mode attribute.

Through the use of this strategy, you may create two units of kinds, one for darkish mode and one for mild mode, and change between them dynamically, offering a greater and extra personalised person expertise.”

Easy methods to load css assets conditionally ?

HTML

HTML

HTML

HTML

About the author

admin

Leave a Comment X

HTML

HTML

HTML

HTML

You may also like

About the author

admin

Leave a Comment X