Usability in web design, or how to evaluate your site from the point of view of the user
From the author: if you are visiting a site for the first time, then this event can be compared to traveling in an unfamiliar area: the local people, of course,…

Continue reading →

SOLID principles in JavaScript. The substitution principle of Barbara Liskov
The substitution principle is most often used in the context of inheritance, however, the essence of the principle is more connected not with inheritance, but with the behavioral compatibility of…

Continue reading →

Web Design Fundamentals
Often, inexperienced developers do not adhere to generally accepted standards, either because of ignorance, or because of the idea that they are smarter than others, and therefore get a terrible…

Continue reading →

Custom CSS Properties

A Ashley Nolan poll in November 2016 showed that 84% of front-end developers use a CSS preprocessor. At the same time, developers consider variables to be the most useful preprocessor feature. No wonder. Variables help organize code, avoid duplication, improve readability, and make refactoring easier.

Preprocessor variables have limitations: they do not know anything about the structure of the DOM, do not work in pseudo-classes and media queries, they cannot be read or modified using JavaScript.

But the main drawback of preprocessors is that styles need to be compiled, you cannot run code directly in a browser.

On this subject, we recommend that you look at the report by Vadim Makeev “My vanilla CSS”

CSS custom properties perform the function of native variables in CSS and do not have the specified restrictions. And more recently, they are supported by all modern browsers. In this article, we will learn how to declare and use custom properties.

Announcement and Use
You can declare a custom property with a double hyphen (-):

CSS
: root {
–main-color: # ff0000;
}
You may ask, why not @ like in LESS, or $ like in Sass, because it is much more pleasing to the eye? This syntax allows you to use native variables with any preprocessor, and they will not compile and will fall into the resulting CSS unchanged.

Specification author Tab Atkins on his blog explains syntax choices for custom properties.

If we use $ foo for variables, we cannot use it for future “variable-like” things.
– Tab Atkins, Let’s Talk about CSS Variables.
The name of the custom property is case sensitive. The –main-color property is not the same as –Main-color.

The value of a custom property can be any value valid in CSS: color, string, keyword, even expression.

Even the following property value is valid:

CSS
–foo: if (x> 5) this.width = 10;
From a CSS point of view, this is an incorrect value, but it can potentially be read and processed from JavaScript. This opens up scope for the imagination of developers.
You can get the value of a custom property using the var () function.

CSS
.box {
color: var (- main-color, black);
}
Note the second argument to the var () function. Its value acts as a fallback and is applied when the variable is not defined. The value of another variable can be used as a fallback:

CSS
: root {
–color-main :;
–color-default: black;
}

.box {
color: var (- color-main, var (- color-default));
}
In the example above, we intentionally did not set the value of the variable using the expression –color:;. This means that the variable is declared, but not defined. Do not confuse with –color:; – here the value of the variable is a space, and this is an incorrect value.

The value of a custom property can be used to declare another property.

CSS
: root {
–main-color: # ff0000;
–border: 2px var (- main-color) solid;
}

.box {
color: var (- main-color);
Border: var (- border);
}
Custom property values ​​can be added, subtracted, multiplied, and divided using the calc () function.

CSS
: root {
–base-font-size: 14px;

–font-size-xl: calc (var (- base-font-size) + 10px);
–font-size-l: calc (var (- base-font-size) + 4px);
}
Scope and inheritance
Variables in Sass, as in other preprocessors, exist outside the selector. Such variables are considered global. Custom properties can only be declared inside the selector. This selector limits the scope of the property. The specification recommends using the: root pseudo-class to declare global user properties.

Custom properties obey the cascade rules and are inherited to the last child.

CSS
: root {
–color: black;
}

.box-black {
–color: white;
}

.title {
color: var (- color);
}

In the example above, we declared the variable –color and set it to black. Then redefined the value for the .box-black selector. And the .title block just uses the current value of the variable, whatever it is. As a result, in the white block, the title is displayed in black, and in black – white.
Keyword Use
Custom CSS properties follow the same rules as regular properties. This means that you can assign them one of the keywords:

inherit – applies the value of the parent element.
initial – applies the initial value defined in the CSS specification (empty value or nothing for custom CSS properties).
unset – the inherited value is applied if the property is inherited (as in the case of custom properties) or the initial value if the property is not inherited.
revert – resets the property to the default value set by the browser stylesheet (empty for custom properties).

JQuery preloader
There is a delay when loading the page content asynchronously or sending a request to add / edit. A preloader is an animation during this delay, which allows you to…

...

Web Design Rules Every Professional Should Know
The basic principles are the same for each representative of this field of activity. They are followed by both experienced professionals and even green beginners. Do you think that, having…

...

5 trends in logo design 2016
Mono-Line Logos Last year, we began to observe how line art is gaining momentum. This is because designers are still very fond of flat design, and it is switching to…

...

What is web design and what does it eat?
When I ask new friends about how I earn my bread, I have to answer twice. At first, it sounds proudly from my lips: “Web designer”, which flies to me…

...