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 supportedcontent
attribute- Its advanced syntax
attr( 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