Useful CSS properties which may come in handy

Useful CSS properties which may come in handy

:active

A CSS pseudo-class represents an element (such as a button) that the user activates. When using a mouse, “activation” usually starts when the user presses the primary mouse button

.joinBtn:active {
  box-shadow: 2px 2px 5px #fc894d;
}

symbols CSS

Descriptor is used to specify the characters that the specified counter system will use to construct the view counter.

The symbol can be a string, an image, or an identifier. It is used inside the at- @counter-style rule

symbols: A B C D E;
symbols: "B6" "B7" "B8" D E;
symbols: "0" "1" "2" "4" "5" "6" "7" "8" "9";
symbols: url('first.svg') url('second.svg') url('third.svg');
symbols: indic-numbers;

The symbols descriptor must be specified when the value of the system descriptor is cyclic , numeric , alphabetic , symbolic , or fixed . When using the additive system, use the additive-symbols descriptor instead to specify symbols.

<ul class="list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>

@counter-style symbols-example {
  system: fixed;
  symbols: A "1" "B7" D E;
}

.list {
  list-style: symbols-example;
}

all

A generic property that resets all property values to their original or inherited values, except for the direction and unicode-bidi properties.

all: initial | inherit | unset
  • initial – change all properties applied to the element to their original values.
  • inherit – change all properties applied to the element to values inherited from the parent.
  • unset – if the property is inherited, then its value is taken as inherit, otherwise it is taken as initial.

Angle values

The <angle> CSS data type represents an angle value expressed in degrees, gradians, radians, or turns. It is used, for example, in gradients and in some transform functions.

transform: rotate(45deg);
transform: rotate(3.1416rad);
transform: rotate(-50grad);
transform: rotate(1.75turn);

animation-composition

A CSS property defines a compound operation that is used when multiple animations affect a single property at the same time.

/* Single animation */
animation-composition: replace;
animation-composition: add;
animation-composition: accumulate;

/* Multiple animations */
animation-composition: replace, add;
animation-composition: add, accumulate;
animation-composition: replace, add, accumulate;
  • replace – the effect value overrides the property’s base value. This is the default value.
  • add – the value of the effect is based on the base cost of the property. This operation creates an additional effect. For animation types where the addition operation is not commutative, the order of the operands is the base value followed by the effect value.
  • accumulate – effect and basic values are combined. For animation types where the addition operation is not commutative, the order of the operands is the base value followed by the effect value.
.icon:hover {
  filter: blur(5px);
  animation: 3s infinite pulse;
  animation-composition: add;
}

@keyframes pulse {
  0% {
    filter: blur(10px);
  }
  100% {
    filter: blur(20px);
  }
}

Browsers support – https://caniuse.com/mdn-css_properties_animation-composition

animation-fill-mode

Specifies which styles should be applied to the element when the animation is not playing.

For example, after its completion or at a stop. By default, when the animation ends, the style of the element returns to its original style, the animation-fill-mode property allows you to change this behavior and make the element style remain the same as the last keyframe.

animation-fill-mode: none | forwards | backwards | both
  • none – no styling is applied to the element.
  • forwards – the style of the last keyframe is applied to the element at the end of the animation. What this frame will be in the animation sequence depends on the combination of animation-direction and animation-iteration-count property values
  • backwards – the first keyframe style is applied to the element and remains for the duration of the given animation-delay. The first keyframe is determined based on the value of animation-direction
  • both – both rules apply to the element, for both forwards and backwards.
.wheel {				
    animation: wheel 3s 1s;	
    animation-fill-mode: both;	
   }
   @keyframes wheel {
    from { transform: translateX(0) rotate(0);}				
    to { transform: translateX(450px) rotate(2turn); }
   }
}

Browsers support – https://caniuse.com/?search=animation-fill-mode

animation-play-state

The animation-play-state CSS property sets whether an animation is running or paused.

animation-play-state: running;
animation-play-state: paused;

/* Multiple animations */
animation-play-state: paused, running, running;

font-variant-alternates

The font-variant-alternates property controls the selection of alternative glyphs.

These alternate glyphs may be referenced in the form of alternate names, which are set in @font-feature-values.

font-variant-alternates: normal | historical-forms | stylistic() | styleset() | character-variant() | swash() | ornaments() | annotation();

@font-feature-values "Leitura Display Swashes" {
   @swash { fancy: 1 }
}

p {
   font-size: 2rem;
}

.variant {
   font-family: Leitura Display Swashes;
   font-variant-alternates: swash(fancy);
}

Browsers support – https://caniuse.com/font-variant-alternates

A CSS pseudo-class selector represents an element that acts as a hyperlink source binding, regardless of whether or not it has been visited.

a:any-link {
  color: forestgreen;
  text-decoration-color: hotpink;
}

appearance

Some form elements have a unique appearance on each operating system. For example, a drop-down list on macOS looks completely different from the same drop-down list on Windows.

The appearance property allows you to set the appearance of some elements to other elements. In this case, the browser will render them taking into account the user’s current operating system and theme.

Currently used mostly appearance: none to reset system styles:

.element {
  appearance: none;
}

attr()

attr() is a CSS function that can get the value of any element attribute, and then use this value directly in styles.

<div class="element" title="Some title"></div>

div::after {
  content: "Tip " attr(title);
}

With type indication:

div::before {
  content: attr(src url);
  content: attr(data-count number);
  content: attr(data-width px);
}
div::before {
  content: attr(data-count number, 0);
  content: attr(src url, "");
  content: attr(data-width px, inherit);
  content: attr(data-something, "default");
}

The attr() function can be used as the value of any CSS property, but so far it is only fully supported by the content property.

backface-visibility

The backface-visibility property controls the visibility of the back of an element when it is rotated relative to the user using the transform property.

This is only needed for 3D transformations, for 2D transformations the property has no effect.

  • visible – the back side of the element is visible (default value).
  • hidden – the back side of the element is not visible.
.element {
	backface-visibility: hidden;
}

background-blend-mode

The background-blend-mode property makes it possible to blend different backgrounds with each other.

  • normal – default value, backgrounds do not blend, the top layer remains opaque.
  • overlay – background-color is blended with background-image to reflect light or dark areas of the background.
background-blend-mode: hard-light;

background-clip

The background-clip property determines in which areas the background image and the background color of the block will be located.

  • border-box – the background occupies all areas, including under the frames (default value).
  • border-box – padding-box – the background occupies the content and padding area, but does not go under the frame. Clearly visible with transparent or intermittent frames.
  • content-box – the background fills only the content area, but does not go into the padding and under the frame.
  • text – background fills the text in the block, works only if color: transparent is specified.
  • and more
background-clip: border-box;

background-origin

The background-origin property determines which areas of the block the background image will occupy: all areas, including the border, padding and content, or just the content.

  • border-box – the background image fills all areas of the block: content, padding, and border.
  • padding box – the background image fills the content and padding area, but does not go under the frame (default value).
  • content-box – the background image fills only the content area, but does not go into the padding and under the frame.
background-origin: padding box;

clip-path

The clip-path property sets the visible area of the image. Anything outside the specified area is hidden.

Crop the image to a 50% circle:

img {
  clip-path: circle(50%);
}

You can set the area in the basic form:

  • inset – quadrilateral
  • circle – circle
  • ellipse – ellipse
  • polygon – polygon
  • polygon – polygon
  • path – complex shape according to SVG filling rules.
img {
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

You can define an area using an SVG source:

img {
  clip-path: url(clip.svg#c1);
}

The area of the figure can become a block model:

  • margin-box – includes padding
  • border-box – according to the given frame
  • padding-box – by content, including the padding property
  • content-box – by content
  • fill-box – along the bounding box of the object
  • stroke-box – on the stroke of the bounding box
  • view-box – according to the SVG viewport

Crop the image at the given border with rounded corners:

img {
  border-radius: 15px;
  clip-path: border-box;
}

You can combine all or several methods of tasking the area:

img {
  clip-path: margin-box circle(50%);
}

block-size

The block-size property determines the horizontal or vertical block size of an element, depending on its writing mode. It corresponds to the width or height property, depending on the value of writing-mode.

If the writing mode is oriented vertically, the block-size value is relative to the element’s width; otherwise, it refers to the height of the element. A related property is inline-size which specifies a different size for the element.

block-size: 150px;
writing-mode: horizontal-tb;

block-size: 150px;
writing-mode: vertical-rl;

border-block

border-block is a boolean shortcut property. It creates a border on the block axis of the element.

The box axis is related to the flow direction of the site. For example, English border-block draws a border on the top and bottom of the element (flow goes from top to bottom), and for Japanese, right and left (flow goes from right to left).

div {
  writing-mode: vertical-rl;
  border-block: 7px dashed white;
}

border-collapse

This property determines which frame model should be used around table cells. The border-collapsed property determines whether the cell should have a common border with neighboring cells, or its own border, as in standard HTML.

border-collapse: separate | collapse | initial | inherit;
  • separate – default value. Each table cell will have its own border.
  • collapse – table cells, where possible, will have a common border.
  • initial – sets the default value.
  • inherit – value is inherited from the parent element.
table {
     border-collapse: collapse;
}

border-end-end-radius and border-end-start-radius

The border CSS property defines a logical border radius on an element, which maps to a physical border radius that depends on the element’s writing-mode, direction, and text-orientation. This is useful when building styles to work regardless of the text orientation and writing mode.

border-end-end-radius: 250px 100px;
direction: rtl;

border-end-end-radius: 50%;
writing-mode: vertical-lr;

border-inline

border-inline is a boolean shortcut property. It creates a frame for the element along the inline axis.

The box axis is related to the flow direction of the site. So, for English, border-inline draws a border on the left and right of the element, and for Japanese, on top and bottom.

div {
  border-inline: 5px solid white;
}

border-spacing

The border-spacing CSS property sets the distance between the borders of adjacent cells in a <table>. This property applies only when border-collapse is separate.

border-spacing: 0;
border-spacing: 5px;
border-spacing: 5px 1rem;

box-decoration-break

The box-decoration-break property determines how the background, padding, border, border-image, box-shadow, margin, and clip-path of an element are applied when the box is fragmented.

The box-decoration-break property has two meanings. The first value is “slice“. The first part of the element is rendered as if its block is not fragmented, then the block display is split into parts for each row, column, etc. The second value is “clone“. Each element is displayed separately along with properties (border, background, padding, margin). Borders hide the four edges of each element fragment, and the background is completely redrawn for each fragment.

box-decoration-break: slice;

brightness()

The brightness() CSS applies a linear multiplier value on an element or an input image, making the image appear brighter or darker.

filter: brightness(1.75);
filter: brightness(1);

caret-color

The caret-color property sets the color of the text cursor in input fields, such as <input> or <textarea>.

input {
  caret-color: #cc0000;
}

column-count

The column-count property sets the recommended number of columns in multi-column text. Their actual number may differ from the given one, depending on the width of the column and the size of the gap between them.

<div id="elem">
  long text
</div>

#elem {
  column-count: 3;
  text-align: justify;
}
  • column-fill – the column-fill property controls how content in a multi-column layout will be split into columns in fixed-height blocks.
  • column-gap – property sets the size of the gap (gutter) between an element’s columns.
  • column-width – sets the optimal width for columns. The number of columns into which the element will be divided depends on how many columns of the user-specified width can fit inside the element.
  • column-rule – is responsible for the appearance of the line between columns in a multi-column layout.
  • column-span – allows an element to span multiple columns in a multi-column layout.

counter(), counters()

The counters themselves have no visible effect, but their values can be used with the counter() and counters() functions.

The following example shows a simple use of the counter() function:

<section class="table-of-contents">
   <h1 class="title">Table</h1>
   <h2 class="chapter">HTML and CSS</h2>
   <h2 class="chapter">Creating styles and style sheets</h2>
   <h2 class="chapter">Selectors: Selecting Formatted Elements</h2>
   <h2 class="chapter">Style inheritance mechanism</h2>
   <h2 class="chapter">Managing a Complex Style Structure: Cascade</h2>
   <h2 class="chapter">Margins, padding, borders</h2>
</section>

On the <section> element, create a counter named chapter and initial value 0:

.table-of-contents {
  counter-reset: chapter 0;
}

Set the increment of the chapter counter using the counter-increment property. Next, we substitute the value of the chapter counter through the counter() function:

.chapter {
  counter-increment: chapter 1;
}

.chapter::before {
  content: "Глава "counter(chapter) ": ";
}

counters()

The counters() function is great for numbering nested lists.

For example, let’s number the left navigation bar of this article using the counters() function:

<ul class="table-of-contents">
   <li class="paragraph"><a href="#kratko">Brief</a></li>
   <li class="paragraph"><a href="#primer">Example</a>
     <ul class="table-of-contents">
       <li class="paragraph"><a href="#counter">counter()</a></li>
       <li class="paragraph"><a href="#counters">counters()</a></li>
     </ul>
   </li>
   <li class="paragraph"><a href="#kak-ponyat">How to understand</a></li>
   <li class="paragraph"><a href="#kak-pishetsya">How to spell</a></li>
   <li class="paragraph"><a href="#argumenty">Arguments</a></li>
</ul>

On the <ul> element, create a counter named paragraph and initial value 0:

.table-of-contents {
  counter-reset: paragraph 0;
}

Set the increase in the value of the paragraph counter using the counter-increment property. Next, we substitute the value of the paragraph counter through the counters() function:

.paragraph {
  counter-increment: paragraph 1;
}

.paragraph::marker {
  content: counters(paragraph, '.');
}

cross-fade()

The CSS function can be used to blend two or more images at a certain transparency.

It can be used for many simple image manipulations, such as colorizing an image with a solid color, or highlighting a specific area of a page by combining an image with a radial gradient.

cross-fade( url(white.png) 0%, url(black.png) 100%); /* completely black */
cross-fade( url(white.png) 25%, url(black.png) 75%); /* 25% white, 75% black */
cross-fade( url(white.png) 50%, url(black.png) 50%); /* 50% white, 50% black */
cross-fade( url(white.png) 75%, url(black.png) 25%); /* 75% white, 25% black */
cross-fade( url(white.png) 100%, url(black.png) 0%); /* completely white */
cross-fade( url(green.png) 75%, url(red.png) 75%); /* green and red at 75% */

Browsers support – https://caniuse.com/css-cross-fade

:current()

The :current() pseudo-class represents the element or ancestor of the element that is currently being displayed.

For example, the following rule highlights which paragraph or list item is read aloud when a document is spoken to:

:current(p, li, dt, dd) {
  background: yellow;
}

:default

The :default pseudo-class defines the form element that is initially set when the page loads.

This pseudo-class can be used for <button>, <input type=”checkbox”>, <input type=”radio”> and <option>.

input:default {
  background-color: lime;
}

:defined

The :defined CSS pseudo-class is any element that has been defined. This includes any standard element built into the browser and custom elements that have been successfully defined.

:defined {
  font-style: italic;
}

simple-custom:defined {
  display: block;
}

:disabled :enabled

The :disabled and :enabled pseudo-classes help to style clickable and clickable elements.

Easily applied to any element that can be disabled: <button> , <command> , <fieldset> , <keygen> , <optgroup> , <option> , <select> , <textarea> , and <input> .

button:disabled {
    opacity: 0.5;
}

display: contents

Makes an element’s children appear as if they were direct children of the parent element, ignoring the element itself.

This can be useful when you need to ignore a shell element when using a CSS grid or similar layout techniques.

.child-elenemt {
	display:contents;
}

drop-shadow()

The drop-shadow() function adds a shadow to images. Unlike the box-shadow property, transparent areas in the image are taken into account and the shadow is cast with them in mind.

.shadow {
   filter: drop-shadow(0 0 3px rgba(100,0,0,0.5));
}

:empty

The :empty pseudo-class represents empty elements, in other words, those that do not contain child elements, text, spaces, or line breaks. For example,

is an empty element, but
<p> </p>, <p> </p> or <p>here</p> is no longer there.

span:empty {
    background: red;
    padding: 3px;
    margin-left: 7px;
    display: inline-block;
   }

empty-cells

The empty-cells CSS property sets whether borders and backgrounds appear around <table> cells that have no visible content.

empty-cells: show;
empty-cells: hide;

:enabled

The :enabled pseudo-class finds any enabled element. An element is enabled if it can be activated (for example, selected, clicked, or typed) or given focus. The element also has a disabled state where it cannot be activated or focused.

input:enabled {
  color: blue;
}

safe-area-inset

When the iPhone X introduced the infamous indentation, new safe-area-inset values were introduced that you may have heard of, allowing browsers to detect the screen area covered by the indentation and move content accordingly.

The env() property in CSS is used to access browser environment variables such as the height or width of the viewport. It allows you to use these values in CSS properties to create responsive and responsive layouts.

The env() syntax is as follows:

property: env(variableName);

where variableName is the name of the environment variable you want to access.

An example usage might look like this:

body {
  margin: 0;
  padding-top: env(safe-area-inset-top, 12px); /* Applying env() for safe area from above */
}

In this example, env(safe-area-inset-top) can be used to create top padding, respecting the safe area of the screen on mobile devices, to avoid cutouts or borders overlapping the content.
12px is a fallback value.

Browsers support – https://caniuse.com/mdn-css_properties_custom-property_env_safe-area-inset-bottom

::first-line

The ::first-line pseudo-element specifies the style of the first line of formatted text. The length of this string depends on many factors such as the font used, browser window size, block width, language, etc.

p::first-line {
      color: red; /* Red text color */
      font-style: italic; /* Italic font */
      font-weight: bold; /* Bold */
}

:first-of-type

The :first-of-type pseudo-class specifies the style of the first element of a certain type in a group of sibling elements (having the same parent).

As an example, consider the following HTML code:

<article>
   <h1>The role of cytokines in dorsalgia</h1>
   <p>Author: Gordon Freeman, Ph.D. Phys.-Math. Sciences</p>
   <p>Article content</p>
   <address>Mail: freemen@blackmesa.com</address>
   <p>Published: <time datetime="2018-11-27">November 27, 2018</time></p>
</article>

article :first-of-type { color: red; }

The :first-of-type pseudo-class without a selector will select the first elements of each type (<h1>, <p>, <address>, <time>) and set their text color to red.

When adding a selector to :first-of-type, the specified elements are selected first, then the first element is taken from them.

The presence of other elements (<h1> and <address>) and their order are ignored.

article p:first-of-type { color: red; }

:focus

The :focus CSS pseudo-class represents an element (such as a form input) that has received focus. It is generally triggered when the user clicks or taps on an element or selects it with the keyboard’s Tab key.

input:focus {
  background-color: lightblue;
}

:focus-within

The :focus-within pseudo-class applies to elements that are either in focus themselves or have child elements in focus.

form:focus-within {
  background-color: #282A2E;
}

font-kerning

The font-kerning property controls font kerning. Kerning is a change in the spacing between certain combinations of letters in order to maintain the density of letters in the text.

This is especially important for letters that have slanted lines like A, Y, W, V. The kerning information is stored in the font itself, and if the font does not support this feature, then the font-kerning property will have no effect on the text.

  • auto – browser independently determines the need for kerning for text. So, for a small font, kerning is turned off to preserve the readability of the text, for a large one, on the contrary, it is turned on.
  • normal – text is kerned.
  • none – browser does not use kerning for text.
.text-block {
	font-kerning: none;
}

font-optical-sizing

The font-optical-sizing property sets whether text rendering is optimized for viewing at various sizes.

Optical sizing is enabled by default for fonts that have an optical sizing axis. The optical sizing axis is represented by the opsz setting in font-variation-settings.

font-optical-sizing: auto;
font-optical-sizing: none;

font-stretch

The font-stretch property sets the font weight to narrow, normal, or wide, allowing text to be condensed or expanded.

font-stretch: ultra-condensed;
font-stretch: extra-condensed;
font-stretch: condensed;
font-stretch: semi-condensed;
font-stretch: normal;
font-stretch: semi-expanded;
font-stretch: expanded;
font-stretch: extra-expanded;
font-stretch: ultra-expanded;

font-synthesis

The font-synthesis property controls which missing faces (bold, italic, or small caps) can be synthesized by the browser.

[ul]

  • none – any of the missing faces will be synthesized by the browser.
  • weight – bold style will be synthesized by the browser.
  • style – the italic style will be synthesized by the browser.
  • small-caps – small caps will be synthesized by the browser.

    • [/ul]

    .syn {
  font-synthesis: style weight;
}

    font-variant

    The font-variant property determines how lowercase letters should be represented – leave them unmodified or make them all smaller-sized uppercase.

    • normal – leaves the character case at its original default.
      small-caps – modifies all lowercase characters as reduced-size uppercase characters

    hyphenate-character

    The hyphenate-character CSS property specifies the character (or string) used at the end of a line before a hyphen break.

    Both automatic and soft hyphens are displayed according to the given hyphen character value.

    hyphenate-character: <string>;
hyphenate-character: auto;
    • string – to be used at the end of a line before a break. The user agent may truncate this value if too many characters are used.
    • auto – user agent selects the appropriate string based on the typographical conventions of the content language. This is the default value of the property and needs to be explicitly set only to override another inherited value.

    hyphens

    The hyphens property determines how words will be hyphenated if the string does not fit in the parent container. Words may not hyphenate at all, hyphenate only in places where hyphen characters are manually entered, or allow the browser to determine the hyphenation itself.

    • none – words do not break when wrapping text.
    • manual – default value, words will only hyphenate in places where hyphens are present.
    • auto – the browser decides how to wrap words.

    Symbols for manual hyphenation

    • ‐ – a hard line break, a hyphen is displayed, even if there is no actual hyphenation in this place.
    • ­ – invisible, soft transfer, not visually displayed. If the browser needs to break a word to wrap, it will navigate to the specified location.

    hyphenate-limit-chars

    The hyphenate-limit-chars property sets the minimum word length at which a line break is allowed, as well as the minimum number of characters before and after the line break.

    The property is used to “manually” set hyphenation options when automatic hyphenation can create incorrect hyphenation or result in unreadable text.

    p {
     text-align: justify; /* */
     hyphens: auto; /* Text wraps */
     hyphenate-limit-chars: 6 3 2; /* Transfer options */
}

    minimum word length for wrapping: 6
    minimum number of letters before a hyphen: 3
    minimum number of letters after a hyphen: 2

    image-rendering

    The image-rendering CSS property sets the image scaling algorithm. The property applies to the element itself, to any images set in its other properties, and to its childs.

    For example, if the natural size of an image is 100x100px , but its actual dimensions are 200x200px (or 50x50px ), then the image will be scaled up (or scaled down) using the algorithm specified by the image-rendering parameter.

    This property does not affect unscaled images.

    image-rendering: auto;
image-rendering: crisp-edges;
image-rendering: pixelated;
    • auto – scaling algorithm is UA dependent. Since version 1.9 (Firefox 3.0), Gecko uses bilinear resampling (high quality).
    • smooth – image must be scaled with an algorithm that maximizes its appearance. In particular, scaling algorithms with “smooth” colors, such as bilinear interpolation, are acceptable. This is intended for images such as photographs.
    • high-quality – identical to smooth , but better scaling is preferred. If system resources are limited, images with high-quality should take precedence over images with any other value when considering which images degrade and by how much.
    • crisp edges – the image is scaled using the nearest neighbor algorithm.
    • pixelated – using the nearest neighbor algorithm, the image is scaled to the next integer multiple of or equal to its original size, and then scaled down to the target size, as for smooth . When scaled to an integer multiple of the original size, this will have the same effect as crisp-edges.

    image-set()

    The image-set() CSS function allows you to list multiple background images with conditions on which the browser will decide which one is the most appropriate to download at the moment.

    div {
  background-image: image-set(
    url("puppy@1x.webp") type("image/webp") 1x,
    url("puppy@2x.webp") type("image/webp") 2x,
    url("puppy@1x.png") type("image/png") 1x,
    url("puppy@2x.png") type("image/png") 2x
  );
}

    input:in-range

    The CSS pseudo-class represents an element whose current value is within the range defined by the attributes and. :in-range input minmax

    label {
  display: block;
  margin-top: 1em;
}

input:in-range {
  background-color: palegreen;
}

    :indeterminate

    A pseudo-class that is used to style three elements: checkboxes, radio buttons, and progress bars.

    Useful in two situations. Firstly, to style the elements in their original state – when the form is opened or the loading begins. Secondly, to show the user the incompleteness of the selection or download process.

    For checkboxes and radio buttons, the indeterminate state cannot be assigned directly in HTML, it can only be set via JavaScript.

    The browser assigns :indeterminate to the progress bar automatically if the value attribute is not defined – the loading percentage.

    input:indeterminate {
  opacity: 0.45;
}

    initial

    The CSS value of initial sets the property to its default value (overrides inheritance).

    body {
color:blue;
}
h2 {
color:initial; /* Revert inheritance */
}

    inset

    The inset property defines a logical block and an element’s built-in start and end offsets that represent the physical offset depending on the writing style, direction, and orientation of the text. It matches top and bottom, or right and left, depending on the values defined for writing-mode, direction, and text-orientation.

    inset: 3px 10px 3px 10px;
inset: 2.4em 3em 3em 3em;
inset: 10px; /* value applies to all sides */

    :invalid, :valid

    Pseudo-classes are used to style form fields, fieldsets, or the form itself:

    :invalid for invalid padding;
    :valid for valid completions.

    input:invalid {
  border: 2px solid red;
}

    [type="checkbox"]:invalid {
  outline: 2px solid red;
  outline-offset: 2px;
}

    isolation

    The isolation property determines whether the element should create a new stack context.

    This is especially useful in combination with background-blend-mode , which only blend the background in the given stacking context: it allows you to isolate groups of elements from their deeper background and blend their background color together.

    isolation: auto;
isolation: isolate;
    • auto – specifies that a new stack context should only be created if the property applied to the element requires it.
    • isolate – indicates that a new stack context should be created.

    The :link pseudo-class is used to style links that the user has never opened before (within the current domain).

    a:link {
  color: blue;
}

    list-style-position

    The list-style-position CSS property sets the position of the ::marker relative to a list item.

    list-style-position: inside;
list-style-position: outside;
    • inside – ::marker is the first element among the list item’s contents.
    • outside – ::marker is outside the principal block box.

    list-style-image

    The list-style-image CSS property sets an image to be used as the list item marker.

    list-style-image: url("../../media/examples/rocket.svg");

    list-style-type

    The list-style-type CSS property sets the marker (such as a disc, character, or custom counter style) of a list item element.

    list-style-type: space-counter;
list-style-type: "F44D";

    :local-link is a link to the same document. Therefore, an element that is the source anchor of a hyperlink whose absolute target URL matches the URL of the element’s own document.

    a:local-link {
  color: green;
}

    matrix()

    The matrix() CSS function defines a homogeneous 2D transformation matrix. Its result is a transform-function data type.

    transform: matrix(1.2, 0.2, -1, 0.9, 0, 20);

    matrix(a, b, c, d, tx, ty) is a shorthand for matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1).

    matrix(a, b, c, d, tx, ty)
a b c d
Are <number>s describing the linear transformation.

    tx ty
Are <number>s describing the translation to apply.

    @namespace

    @namespace is an at-rule that defines the XML namespaces to be used in the CSS stylesheet.

    /* Default namespace */
@namespace url(XML-namespace-URL);
@namespace "xml-namespace-url";

/* Namespace prefixed with */
@namespace prefix url(XML-namespace-URL);
@namespace prefix "XML-namespace-URL";

@namespace url(http://www.w3.org/1999/xhtml);
@namespace svg url(http://www.w3.org/2000/svg);

    This matches all XHTML <a> elements since XHTML is a namespace with no default prefix:

    a {}

    Matches all SVG <a> elements:

    svg|a {}

    Corresponds to XHTML and SVG <a> elements 

    *|a {}

    Browser support – https://caniuse.com/?search=%40namespace

    :not()

    The :not() CSS pseudo-class represents elements that do not match a list of selectors. Since it prevents specific items from being selected, it is known as the negation pseudo-class.

    p:not(.irrelevant) {
  font-weight: bold;
}

p > strong,
p > b.important {
  color: crimson;
}

p > :not(strong, b.important) {
  color: darkmagenta;
}

    offset

    The offset shorthand property specifies all the properties needed to animate an element along a given path.

    offset: path('M 20 60 L 120 60 L 70 10 L 20 60') 0% auto 90deg;

    This property is shorthand for the following CSS properties:

    offset-anchor
offset-distance
offset-path
offset-position
offset-rotate

/* Offset position */
offset: auto;
offset: 10px 30px;
offset: none;

/* Offset path */
offset: ray(45deg closest-side);
offset: path('M 100 100 L 300 100 L 200 300 z');
offset: url(arc.svg);

/* Offset path with distance and/or rotation */
offset: url(circle.svg) 100px;
offset: url(circle.svg) 40%;
offset: url(circle.svg) 30deg;
offset: url(circle.svg) 50px 20deg;

/* Including offset anchor */
offset: ray(45deg closest-side) / 40px 20px;
offset: url(arc.svg) 2cm / 0.5cm 3cm;
offset: url(arc.svg) 30deg / 50px 100px;

    :only-child

    The :only-child pseudo-class only applies to a child element if it is the only one of the parent.

    article h3:only-child {
  color: red;
}

    Instead of :only-child, the combinations :first-child:last-child or :nth-child(1):nth-last-child(1) can be used.

    :optional

    The :optional CSS pseudo-class represents any <input>, <select&gt;, or <textarea> element that does not have the required attribute set on it.

    label:optional {
  background-color: palegreen;
}

    :out-of-range

    The :out-of-range CSS pseudo-class represents an <input> element whose current value is outside the range limits specified by the min and max attributes.

    <input name="amount" type="number" min="2" max="6" value="4" />

    input:out-of-range {
  background-color: orangered;
}

    overflow-anchor

    The overflow-anchor property allows you to override the browser’s scroll anchor behavior, which adjusts scroll position to minimize content shifts.

    The scroll anchor behavior is enabled by default in any browser that supports it. Therefore, changing the value of this property is usually only necessary if you have problems with scroll anchoring in a document or part of a document and need to disable the behavior.

    overflow-anchor: auto;
overflow-anchor: none;

    overflow-wrap

    CSS property applies to inline elements, setting whether the browser should insert line breaks in an otherwise non-breaking line to prevent text from overflowing the line’s frame

    overflow-wrap: normal;
overflow-wrap: break-word;
overflow-wrap: anywhere;

    Unlike word-break, overflow-wrap will generate a break only if the entire word cannot fit on a separate line without overflow.

    @page

    The @page rule is used to modify some CSS properties when printing a document.

    You cannot change all CSS properties from @page. You can only change the margins, orphans, widows, and page breaks of a document. Attempts to change any other CSS properties will be ignored.

    @page {
  margin: 1cm;
}

@page :first {
  margin: 2cm;
}

    perspective

    The CSS property defines the distance between the z=0 plane and the user to give the 3D element some perspective.perspective.

    perspective: 800px;

    perspective-origin

    The perspective-origin property determines the position from which the user is looking at the 3D positioned element.

    The perspective property uses the value of the perspective-origin property as the vanishing point.

    perspective-origin is always used in conjunction with the perspective property.

    perspective-origin: 50% 50%;

    place-content

    place-content is a shortcut property for align-content and justify-content. With it, you can align items in flex or grid containers.

    .container {
  place-content: center;
}

    place-items

    Shortcut for specifying values for both align-items and justify-items at once. You need to specify it in that order.

    .container {
  display: grid;
  place-items: stretch end;
}

    place-self

    Shortcut for simultaneously specifying values for the justify-self and align-self properties.

    .container {
  justify-items: stretch;
}

.item1 {
  place-self: start end;
}

    :placeholder-shown

    CSS pseudo-class represents any element or element that currently displays placeholder text. :placeholder-shown input textarea

    input:placeholder-shown {
  background-color: ivory;
}

    pointer-events

    The pointer-events property controls how the element will react to the pointer (pointer): hover or click of the mouse cursor, tap on the touch screen, corresponding events from JavaScript.

    button {
  pointer-events: none;
}
    • none – Prevents the element from responding to a pointer.
    • auto – the element responds to a pointer (default value)

    The print-color-adjust property sets what the user agent can do to optimize the appearance of an element on the output device.

    By default, the browser is allowed to make any changes to the appearance of an element that it deems necessary and reasonable, given the type and capabilities of the output device.

    • economy – user agent is allowed to make changes to the element as it sees fit and reasonable in order to optimize the output for the device for which it is rendered. For example, when printing, the browser may discard all background images and adjust text colors to make sure the contrast is optimized for reading on white paper. This is the default.
    • exact – content of the element has been deliberately and carefully considered to use colors, images, and styles in a thoughtful and/or important way, so that a change in the browser might actually make things worse, not better. The appearance of the content must not be changed except at the request of the user. For example, a page might contain a list of information with rows whose background colors alternate between white and light gray. Removing the background color will reduce the legibility of the content.

    quotes

    A CSS property that allows you to set the type of quotes on the site or in a separate block. Each language uses a certain type of quotation marks.

    The type of quotation marks specified in the value will be automatically set around the text wrapped in the <q&gt; tag, or when the content property of the ::before and ::after pseudo-elements is set to open-quote or close-quote.

    body {
  quotes: "«" "»" "„" "“";
}

span::before {
  content: open-quote;
}

span::after {
  content: close-quote;
}

    :read-only

    The :read-only selector selects elements with the “readonly” attribute. These are elements that cannot be edited by the user.

    Editable elements include:

    • input and textarea elements that are not read-only and disabled.
    • Elements that are not input or textarea and have a contenteditable attribute.
    input:read-only {
	background-color: #ccc;
}

    :read-write

    The :read-write CSS pseudo-class represents an element (such as input or textarea) that is editable by the user.

    *:read-write {
  border: 2px solid darkorange;
}

    repeating-type-gradient()

    The CSS function creates an image consisting of a repeating gradient (not ) with color transitions rotated around a central point (not ).repeating-conic-gradient() single gradientradiating from the center

    background: repeating-conic-gradient(
  from 45deg at 10% 50%,
  brown 0deg 10deg,
  darkgoldenrod 10deg 20deg,
  chocolate 20deg 30deg
);

    background: repeating-linear-gradient(transparent, #4d9f0c 40px),
            repeating-linear-gradient(0.25turn, transparent, #3f87a6 20px);

    background: repeating-radial-gradient(closest-side, #3f87a6, #ebf8e1, #f69d3c);

    resize

    The resize property specifies whether the element can be resized. Often used on textarea, but can be applied to any element that has an overflow property set to something other than visible

    • one – dimensions cannot be changed (default value).
    • both – dimensions can be changed horizontally and vertically.
    • horizontal – can be resized horizontally.
    • vertical – can be resized vertically.

    scale3d()

    A CSS function defines a transformation that changes the size of an element in 3D space.

    Since the scaling amount is defined by a vector, it can scale to different dimensions at different scales.

    transform: scale3d(1.3, 1.3, 1.3);

    scroll-margin

    The shorthand scroll-margin property sets all the scroll margins of an element at once, assigning values in the same way that the margin property does for the margins of an element.

    scroll-margin: 20px;

    This property is shorthand for the following CSS properties:

    scroll-margin-bottom
scroll-margin-left
scroll-margin-right
scroll-margin-top

    scrollbar-gutter

    scrollbar-gutter solves the issue of content jumping around when the scrollbar appears or hides. This problem usually appears when the content height changes or a modal appears.

    scrollbar-gutter has 3 possible values:

    • auto – default value. If overflow: scroll or overflow: auto is set, and the content overflows, then the padding for the scrollbar will appear.
    • stable – the padding for the scrollbar appears if the overflow value is hidden, scroll or auto, regardless of whether the content causes overflow or not.
    • stable both-edges – the same as stable, but padding will be created from two opposite sides. When scrolling vertically – right and left, when scrolling horizontally – top and bottom.
    body {
  scrollbar-gutter: stable;
}

    ::selection

    The ::selection pseudo-element applies styles to the part of the document that has been selected by the user (for example, by clicking and dragging the mouse over text).

    p::selection {
  color: red;
  background-color: yellow;
}

    Only certain CSS properties can be used with ::selection:

    • color
    • background-color
    • text-decoration and related properties
    • text-shadow

    @supports

    The @supports directive allows you to check if the browser supports a property, rule, or CSS selector.

    If the condition is true, then the CSS code written inside the curly braces will be executed.

    Check if the browser supports the display property with a grid value:

    .container {
  display: flex;
}

    @supports (display: grid) {
  .container {
    display: grid;
  }
}

    tab-size

    tab-size changes the length of the tab character.

    pre {
  tab-size: 4;
}

    :target

    To go to the selected fragment of the document, the # symbol is written in the address and the name of the identifier is indicated. For example, http://www.w3.org/TR/css3-selectors/#target-pseudo navigates to an element whose id attribute is set to target-pseudo.

    Such an address entry is called a “target element“.

    The :target pseudo-class is applied to the target element, in other words, to the identifier that is specified in the browser’s address bar.

    :target {
  border: 2px solid black;
}

    text-align-last

    The text-align-last property specifies how to align the last line of a block or line immediately before a forced line break.

    text-align-last: center;
text-align-last: right;
text-align-last: left;

    text-decoration-skip-ink

    The text-decoration-skip-ink property defines the method of drawing superscripts and underlines when passing over the upper and lower elements of glyphs.

    text-decoration-skip-ink: auto;
text-decoration-skip-ink: none;
    • none – underlines and overlines are drawn along the entire length of the text content, including the portions that cross the bottom and top elements of the glyphs.
    • auto – browser can break the underline and overlay so that they don’t touch or come close to the glyph. That is, they break where they would otherwise cross the glyph.

    text-underline-offset

    The text-underline-offset CSS property sets the offset distance of an underline text decoration line (applied using text-decoration) from its original position.

    text-underline-offset: auto;
text-underline-offset: 8px;
text-underline-offset: -0.5rem;

    text-underline-position

    The text-underline-position property controls the position of the decorative line when the element’s text-decoration: underline property is set.

    • auto – browser itself calculates the position of the line, focusing on the baseline of the font (the default value).
    • under – the line is placed under the text with additional indentation to avoid crossing with letter elements.
    • left – the line is located to the left of the text (for vertical writing mode).
    • right – the line is located to the right of the text (for vertical writing mode).

    text-decoration-thickness

    The text-decoration-thickness property controls the thickness of the decorative line for text, if it is set by the text-decoration property.

    .thin {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: #2e9aff;
  text-decoration-thickness: 1px;
}

    text-emphasis

    The text-emphasis property for text emphasis applies emphasis markers (except for spaces and control characters) to the text.

    text-emphasis: 'x';
text-emphasis: filled red;
text-emphasis: none;
text-emphasis: filled double-circle #ffb703;

    text-indent

    The text-indent property sets the amount of indentation for the first line of a block of text (for example, for a p paragraph).

    text-indent: -3em;
text-indent: 30%;

    text-overflow

    specifies how to notify users of hidden overflow content. It can be truncated, display an ellipsis (‘ ‘), or display a custom string.

    text-overflow: clip;
text-overflow: ellipsis;

    The text-overflow property does not cause overflow. To force text to overflow its container, you need to set other CSS properties: overflow and white-space. Example:

    overflow: hidden;
white-space: nowrap;

    text-rendering

    The text-rendering property allows you to tell the browser which optimizations to make on text during rendering.

    <p class="legible">I’m filling this page</p>

    .legible {
  text-rendering: optimizeLegibility;
}

    .seelctor {
  text-rendering: auto; /* По умолчанию */
  text-rendering: optimizeSpeed;
  text-rendering: optimizeLegibility;
  text-rendering: geometricPrecision;
}
    • auto – The default value. The browser tries to independently guess at what moment of rendering the speed of the output of characters is important, at what – readability, and at what – geometric accuracy.
    • optimizeSpeed – when rendering text, the browser will prioritize rendering speed, so ligatures and kerning will be disabled.
    • optimizeLegibility – it is used when not rendering speed is important, but text readability and visual beauty of character combinations. With this value, the browser actively uses ligatures and corrects kerning.
    • geometricPrecision – the browser starts calculating kerning based on the geometric precision in the position of the characters, which in some cases can significantly improve the appearance of the text.

    transform-box

    The transform-box property determines the area of an element to which transformations are applied.

    .element {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transform: perspective(17px);
}

    The most common use of transform-box is when working with vector images and animations.

    If you specify a fill-box value, the transform-origin value will be based on the center of the vector object, not the center of the entire SVG canvas.

    content-box;
border-box;
fill-box;
stroke-box;
view-box

    transform-origin

    The transform-origin property sets the coordinates of the point relative to which the element will be transformed.

    transform-origin: center;
transform-origin: top left;
transform-origin: 50px 50px;
transform-origin: bottom right 60px;

    transform-style

    The transform-style property determines how an element’s children will behave in 3D space when transformed.

    .parent {
  transform-style: preserve-3d;
}

.child {
  transform: rotateY(-30deg);
}

    Let’s say there is a parent element that has children. Setting the parent element’s transform-style property to preserve-3d will allow normal 3D transforms to be applied to child elements.

    With normal 3D transformations, a child element can, for example, intersect the parent element when rotated. If you set the value to flat, then the child elements will always lie in the plane of the parent and will not be able to cross it under any rotation, scaling, or other conditions.

    It turns out that with transform-style: preserve-3d, each child element receives a plane independent of the parent, to which 3D transformations can be applied. With transform-style: flat, there is exactly one plane, the plane of the parent, and no transformations can force the child to move out of that plane.

    unset

    It is a combination of the initial and inherit keywords. The unset keyword sets the value of the property to inherit if the property is inherited from its parent, otherwise the value is set to initial.

    * {
    margin: unset;
    padding: unset;
    border: unset;
   }

    user-select

    The user-select property determines whether the user can select text in the element for which this property is set.

    p {
  user-select: none;
}
    • none – text inside an element cannot be selected and therefore copied.
    • text – text can be highlighted.
    • all – all text, including text in child elements, can be selected.
    • contain – only the text of the element to which the property is set can be selected.
    • auto – the value is calculated depending on the element:
      for an editable element (attribute contenteditable) the value will be contain;
    • for ::before and ::after pseudo-elements, the value will be none;
      the values user-select: all and user-select: none are inherited from the parent. otherwise the value will be text

    visibility

    The visibility property hides the element from the user’s eyes. Pretty much the same as opacity does. In both cases, the element is not visible, but the mechanism of operation of these properties is different.

    If using opacity you can flexibly change the transparency of an element and make it, for example, 33% visible, then the visibility property has only two states: visible and invisible.

    the hidden element still affects the flow of the document and occupies the space allotted to it.

    visibility has only two values used:

    • visible – default value, the element is visible.
    • hidden – the element is not visible on the page, but occupies the space allotted to it, affects the flow of the document.

    An important feature of the property is that, unlike display: none or opacity: 0, it does not just hide the parent, but is inherited on all child elements. This means that this behavior can be rewritten and the nested element with visibility: visible will be visible. This can be used to customize markup generated by a third party library.

    white-space

    The white-space property sets how to display spaces between words. Under normal circumstances, any number of spaces in HTML code will appear as one on a web page. The exception is the pre element, text placed in this container is displayed with all spaces as it was formatted by the user. Thus, white-space mimics the work of pre, but unlike it does not change the font to monospace.

    • normal – the text in the browser window is displayed as usual, line breaks are set automatically.
    • nowrap – spaces are not taken into account, line breaks in HTML code are ignored, all text is displayed on one line; however, adding
      wraps the text on a new line.
    • pre – the text is shown including all spaces and hyphens, as they were added by the developer in the HTML code. If the line is too long to fit in the browser window, a horizontal scroll bar will be added.
    • pre-line – spaces are not taken into account in the text, the text is automatically wrapped to the next line if it does not fit in the specified area.
    • pre-wrap – all spaces and hyphens are preserved in the text, however, if the width of the line does not fit into the specified area, then the text will automatically wrap to the next line.

    will-change

    The will-change property allows you to tell the browser in advance about the changes (animation, movement, etc.) that may occur to the element. This gives the browser time to optimize these changes before they happen. This improves the speed of the site.

    The will-change property takes one of four possible values:

    • auto – does not specify any specific property, the browser will work as usual. Default value.
    • scroll-position – indicates that the position of the element is expected to change when the page is scrolled. The browser prepares and renders content outside of the visible part of the page.
    • contents – indicates that the content of the element is expected to change. The browser limits or completely stops caching an element and re-renders it from scratch whenever its content changes.
      changing property – the name of the property that will change (transform, opacity, etc.). Multiple properties are separated by commas.
    
div {
  will-change: transform;
  will-change: opacity;
  will-change: top, left, bottom, right;
}
    0

    More

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    lil-code© | 2022 - 2024
    Go Top
    Authorization
    Registration
    *
    *
    Entry Lost your Password ?
    Registration
    *
    *
    *
    *
    Signup
    Registration
    Password generation
    Get New Password