Can html use variables

Variables

Also known as CSS Custom Properties, variables allow you to create a named value that can be reused throughout your CSS, similar to how letters stand in for numbers in algebraic variables.

Defining Variables

Variable names must be prefixed with two dashes: — , and they can be written like ordinary CSS declarations: —variable-name: #eee; They should be defined within an element and can only be used on elements that are children of the element in which they are defined. For variables you wish to use throughout your CSS, define them using html as the selector. (You sometimes also see :root used as a selector for global variables. This is the same as using html .)

Defining a variable that can be used anywhere in the CSS

Defining a variable that can only be used in the site header

Redefining and Overriding

As with any normal CSS property, variable definitions can be overriden by redeclaring them later in the document or on a selector with higher specificity. All instances of the variable in use will reflect the new value.

A common use for this might be with media queries:

You might also use this to create component-specific overrides:

Using Variables

Variables can be used in place of a relevant value by expressing the name within the parinthesis of var() .

Video Lesson

The following video demo is fully interactive. You can pause at any time to directly edit the code, and resume playback to restore to where you left off.

Resource Links

Источник

How to Use Javascript Variable in HTML

You can only use Javascript variable in HTML by linking the Javascript variable to a HTML element using an id or class attribute.

Linking Javascript Variable to HTML Element

Assign an id to the element.

 id="content-holder">Content is loading . 

If you check this now all you will see is:

You can now add Javascript to your page using script tags.

 // Write your Javascript code inside here  

Now, you can start working on the Javascript. Create your Javascript Variable.

var newContent = "This content will be loaded as a paragraph on the p tag when we add it through Javascript."; 

You grab the element in Javascript using the assigned id value.

var contentHolder = document.getElementById('content-holder'); 

To display the variable in HTML, assign the variable to the element in Javascript using the innerHTML property.

contentHolder.innerHTML = newContent; 

Complete Code

 id="content-holder">Content is loading . // Write your Javascript code inside here var newContent = "This content will be loaded as a paragraph on the p tag when we add it through Javascript."; var contentHolder = document.getElementById('content-holder'); contentHolder.innerHTML = newContent;  

You can use the above method for string and number variables.

Using Javascript Array Variable in HTML

To view array and object variables in HTML, you have to loop through the items in Javascript before passing them to HTML.

You can also interact with the code for this project.

Hi there! I am Avic Ndugu.

I have published 100+ blog posts on HTML, CSS, Javascript, React and other related topics. When I am not writing, I enjoy reading, hiking and listening to podcasts.

Front End Developer Newsletter

Receive a monthly Frontend Web Development newsletter.
Never any spam, easily unsubscribe any time.

About

If you are just starting out you can test the waters by attempting the project-based HTML tutorial for beginners that I made just for you.

Okay, you got me there, I made it because it was fun and I enjoy helping you on your learning journey as well.

You can also use the HTML and CSS projects list as a source of projects to build as you learn HTML, CSS and JavaScript.

Start understanding the whole web development field now

Stop all the confusion and start understanding how all the pieces of web development fit together.

Never any spam, easily unsubscribe any time.

Recent Posts

Copyright © 2018 — 2023 DevPractical. All rights reserved.

Источник

Using CSS custom properties (variables)

Custom properties (sometimes referred to as CSS variables or cascading variables) are entities defined by CSS authors that contain specific values to be reused throughout a document. They are set using custom property notation (e.g., —main-color: black; ) and are accessed using the var() function (e.g., color: var(—main-color); ).

Complex websites have very large amounts of CSS, often with a lot of repeated values. For example, the same color might be used in hundreds of different places, requiring global search and replace if that color needs to change. Custom properties allow a value to be stored in one place, then referenced in multiple other places. An additional benefit is semantic identifiers. For example, —main-text-color is easier to understand than #00ff00 , especially if this same color is also used in other contexts.

Custom properties are subject to the cascade and inherit their value from their parent.

Note: Variables do not work inside media queries and container queries. The var() function can be used in place of any part of a value in any property on an element. The var() function cannot be used as property names, selectors, or anything else besides property values. So, we can’t use it in a media query or container query.

Basic usage

Declaring a custom property is done using a custom property name that begins with a double hyphen ( — ), and a property value that can be any valid CSS value. Like any other property, this is written inside a ruleset, like so:

element  --main-bg-color: brown; > 

Note that the selector given to the ruleset defines the scope that the custom property can be used in. A common best practice is to define custom properties on the :root pseudo-class, so that it can be applied globally across your HTML document:

However, this doesn’t always have to be the case: you maybe have a good reason for limiting the scope of your custom properties.

Note: Custom property names are case sensitive — —my-color will be treated as a separate custom property to —My-color .

As mentioned earlier, you use the custom property value by specifying your custom property name inside the var() function, in place of a regular property value:

element  background-color: var(--main-bg-color); > 

First steps with custom properties

Let’s start with this CSS that applies the same color to elements of different classes:

.one  color: white; background-color: brown; margin: 10px; width: 50px; height: 50px; display: inline-block; > .two  color: white; background-color: black; margin: 10px; width: 150px; height: 70px; display: inline-block; > .three  color: white; background-color: brown; margin: 10px; width: 75px; > .four  color: white; background-color: brown; margin: 10px; width: 100px; > .five  background-color: brown; > 

We’ll apply it to this HTML:

div> div class="one">1:div> div class="two">2: Text span class="five">5 - more textspan>div> input class="three" /> textarea class="four">4: Lorem Ipsumtextarea> div> 

This produces the following result:

Using the :root pseudo-class

Notice the repetitive CSS in the example above. The background color is set to brown in several places. For some CSS declarations, it is possible to declare this higher in the cascade and let CSS inheritance solve this problem naturally. For non-trivial projects, this is not always possible. By declaring a custom property on the :root pseudo-class and using it where needed throughout the document, a CSS author can reduce the need for repetition:

:root  --main-bg-color: brown; > .one  color: white; background-color: var(--main-bg-color); margin: 10px; width: 50px; height: 50px; display: inline-block; > .two  color: white; background-color: black; margin: 10px; width: 150px; height: 70px; display: inline-block; > .three  color: white; background-color: var(--main-bg-color); margin: 10px; width: 75px; > .four  color: white; background-color: var(--main-bg-color); margin: 10px; width: 100px; > .five  background-color: var(--main-bg-color); > 

div> div class="one">div> div class="two">Text span class="five">- more textspan>div> input class="three" /> textarea class="four">Lorem Ipsumtextarea> div> 

This leads to the same result as the previous example, yet allows for one canonical declaration of the desired property value; very useful if you want to change the value across the entire page later.

Inheritance of custom properties

Custom properties do inherit. This means that if no value is set for a custom property on a given element, the value of its parent is used. Take this HTML:

div class="one"> div class="two"> div class="three">div> div class="four">div> div> div> 

.two  --test: 10px; > .three  --test: 2em; > 

In this case, the results of var(—test) are:

• For the class=»two» element: 10px
• For the class=»three» element: 2em
• For the class=»four» element: 10px (inherited from its parent)
• For the class=»one» element: invalid value, which is the default value of any custom property

Keep in mind that these are custom properties, not actual variables like you might find in other programming languages. The value is computed where it is needed, not stored for use in other rules. For instance, you cannot set a property for an element and expect to retrieve it in a sibling’s descendant’s rule. The property is only set for the matching selector and its descendants, like any normal CSS.

Custom property fallback values

Using the var() function, you can define multiple fallback values when the given variable is not yet defined; this can be useful when working with Custom Elements and Shadow DOM.

Note: Fallback values aren’t used to fix the browser compatibility. If the browser doesn’t support CSS custom properties, the fallback value won’t help. It’s just a backup for the browser which supports CSS custom properties to choose a different value if the given variable isn’t defined or has an invalid value.

The first argument to the function is the name of the custom property to be substituted. The second argument to the function, if provided, is a fallback value, which is used as the substitution value when the referenced custom property is invalid. The function only accepts two parameters, assigning everything following the first comma as the second parameter. If that second parameter is invalid, the fallback will fail. For example:

.two  /* Red if --my-var is not defined */ color: var(--my-var, red); > .three  /* pink if --my-var and --my-background are not defined */ background-color: var(--my-var, var(--my-background, pink)); > .three  /* Invalid: "--my-background, pink" */ background-color: var(--my-var, --my-background, pink); > 

Including a custom property as a fallback, as seen in the second example above, is the correct way to provide more than one fallback. The technique has been seen to cause performance issues as it takes more time to parse through the variables.

Note: The syntax of the fallback, like that of custom properties, allows commas. For example, var(—foo, red, blue) defines a fallback of red, blue — anything between the first comma and the end of the function is considered a fallback value.

Handling invalid custom properties

Each CSS property can be assigned a defined set of values. If you try to assign a value to a property that is outside its set of valid values, it’s considered invalid.

When the browser encounters an invalid value for a normal property, it discards the value, and elements are assigned the values that they would have had if the declaration simply did not exist.

However, when the values of custom properties are parsed, the browser doesn’t yet know where they will be used, so it must consider nearly all values as valid.

Unfortunately, these valid values can be used, via the var() functional notation, in a context where they might not make sense. Properties and custom variables can lead to invalid CSS statements, leading to the new concept of valid at computed time.

When the browser encounters an invalid var() substitution, then the initial or inherited value of the property is used.

The next two examples illustrate this.

Invalid normal properties

In this example we attempt to apply a value of 16px to the color property. Because this is invalid, the CSS is discarded and the result is as if the rule did not exist, so the previous color: blue rule is applied instead, and the paragraph is blue.

HTML

p>This paragraph is initially black.p> 

Источник