This is the 27th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

The goal of this series is to provide a complete guide to CSS functions. It will list as many CSS functions as possible and how to use them. When you need to use or understand a CSS function, just look here.

miscellaneous

url

One of the most commonly used functions that represents a file address. It can be a relative path, an absolute path, or base64, or an SVG ID

This function can be used with background, background-image, border, border-image, border-image-source, content, cursor, filter, list-style, background-image, border-image, border-image-source, content, cursor, filter, list-style, SRC in list-style image, mask, mask-image, offset-path,@counter-style/symbol and @font-face

offset-path: url(#path);
mask-image: url("masks.svg#mask1");
cursor: url(pointer.cur), pointer;
Copy the code

attr

Gets an HTML attribute value for the selected element.

<style>
    div::after {
        content: "----" attr(data-extra)
    }
</style>
<body>
    <div data-extra="lalalla">test</div>
</body>
Copy the code

Note:

  • attr()Theoretically, it can be used for all CSS properties, but currently only pseudo-element properties are supportedcontentattribute
  • Its advanced syntaxattr( attribute-name <type-or-unit>? [, <fallback> ]? )There is currently no browser support.

var

CSS variables variables

 :root {
    --size:100px;
    --color: antiquewhite;
    --bg: tomato;
}
#container {
    width: var(--size);
    height: var(--size);
    color: var(--color);
    background-color:var(--bg) ;
}
<div id="container">text</div>
Copy the code

Adaptive pictureimage-set()

The image-set() function is a way for the browser to select the most appropriate CSS image from a given collection.

background-image: image-set( "cat.png" 1x,"cat-2x.png" 2x,"cat-print.png" 600dpi);
Copy the code

PNG for normal screens, cat-2x.png for Retina screens, and cat-print.png for higher resolution screens. For more information about responsive images, see responsive images

In the shadow of the dom::slotted()

This is also a pseudo-class that represents the slot passed by the custom element:

 <span slot="person-age">Immortal</span>
::slotted(span) {font-weight:bold; color: gray; font-family: sans-serif; } 
Copy the code

The style is applied to the span element passed from the outside.

Complete the demo:

<person-details>
    <p slot="person-name">Dr. Shazaam</p>
    <span slot="person-age">Immortal</span>
    <span slot="person-occupation">Superhero</span>
</person-details>
<template id="person-template">
    <div>
        <h2>Personal ID Card</h2>
        <slot name="person-name">NAME MISSING</slot>
        <ul>
            <li>
                <slot name="person-age">AGE MISSING</slot>
            </li>
            <li>
                <slot name="person-occupation">OCCUPATION MISSING</slot>
            </li>
        </ul>
    </div>
</template>


<script>
    customElements.define('person-details'.class extends HTMLElement {
            constructor() {
                super(a);let template = document.getElementById('person-template');
                let templateContent = template.content;

                const shadowRoot = this.attachShadow({ mode: 'open' });

                let style = document.createElement('style');
                style.textContent = 'div { padding: 10px; border: 1px solid gray; width: 200px; margin: 10px; } ' +
                    'h2 { margin: 0 0 10px; } ' +
                    'ul { margin: 0; } ' +
                    'p { margin: 10px 0; } ' +
                    '::slotted(*) {font-weight:bold; color: gray; font-family: sans-serif; } ';

                shadowRoot.appendChild(style);
                shadowRoot.appendChild(templateContent.cloneNode(true)); }})</script>
Copy the code

element

Currently only Firefox implements it.

<div style="width:400px; height:400px; background:-moz-element(#myBackground1) no-repeat;" > <p>This box uses the element with the #myBackground1 ID as its background! </p> </div> <div style="overflow:hidden; height:0;" > <div id="myBackground1" style="width:1024px; height:1024px; background-image: linear-gradient(to right, red, orange, yellow, white);" > <p style="transform-origin:0 0; transform: rotate(45deg); color:white;" >This text is part of the background. Cool, huh? </p> </div> </div>Copy the code

env

Insert the value of the environment variable defined by the user agent into your CSS.

Originally provided by the iOS browser to allow developers to place their content in a secure area of the viewport, the safe-area-inset-* value defined in this specification can be used to ensure that content is fully displayed even in a non-rectangular viewport.

body { padding: 
    env(safe-area-inset-top) 
    env(safe-area-inset-right) 
    env(safe-area-inset-bottom)
    env(safe-area-inset-left); 
}
Copy the code

Counter and counters

Counter gets a string representing the current value of the counter, while counters get the current value of the nested counter.

ol {
  counter-reset: listCounter;
}
li {
  counter-increment: listCounter;
}
li::after {
  content: "[" counter(listCounter) "] == ["
               counter(listCounter, upper-roman) "]";
}
Copy the code

In the future

CSS functions are still evolving, and some of the following features are already implemented in some browsers, and some are under w3c discussion.

cross-fade()

Multiple images can be mixed with a certain degree of transparency. The old and new syntax for this function is already inconsistent.

A demo of the old syntax has been implemented as follows:

.crossfade {
    width: 300px;
    height: 300px;
    background-image: -webkit-cross-fade(
        url('br.png'),
        url('tr.png'),
        75%);
    background-image: cross-fade(
        url('br.png'),
        url('tr.png'),
        75%);
}
Copy the code

dir()

Set the direction of text writing, which only Firefox implements.

has()

No browser implementation yet

/* Select any <a> that directly contains a <img> child element. */ var test = document.querySelector('a:has(> img)');Copy the code

Mathematical function

  • Sine:sin()
  • Cosine:cos()
  • The tangent:tan()
  • Arc cosine:acos()
  • Arcsine:asin()
  • The arctangent:atan()
  • The arctangent:atan2()
  • The square root:sqrt()
  • The square root of the sum of squares of parameters:hypot()
  • Power function:pow()

:host() 和 :host-context()

Use in shadow DOM

<context-span class="footer">Chris Mills</context-span> */ :host(.footer) {font-weight: bold; } /* Select a shadow root host if and only if the shadow root host is a descendant of the parenthesis selector argument (h1) :  <h1>Host selectors <a href="#"><context-span>example</context-span></a></h1> */ :host-context(h1) { font-weight: bold; }Copy the code

:nth-col() 和 :nth-last-col()

Used in a grid layout to define a column or columns

:nth-col(odd) {
  background-color: pink;
}
Copy the code

symbols()

Define counter styles, which only Firefox implements

Ol {list-style: Symbols (cyclic "*" "†" "‡"); }Copy the code