Hi, today we are going to cover some very useful CSS tips, let’s get started!

Mixed mode

Firefox and Safari have been supporting Photoshop like blending modes for a while, but Chrome and Opera require prefixes. Here’s an example:

// You can also try different styles. Blend {background: # FFF; }.blend img { mix-blend-mode: darken; }Copy the code

Online Experience Address

The gradient border

  

Now, you can even use gradients in borders.

Using gradient borders is as simple as setting a pseudo-element with a lower Z-index:

.box { margin: 80px 30px; width: 200px; height: 200px; position: relative; background: #fff; float: left; }.box:before { content: ''; z-index: -1; position: absolute; width: 220px; height: 220px; top: -10px; left: -10px; background-image: linear-gradient(90deg, yellow, gold); }Copy the code

For example, you can see here, or you can see that background-clip and background-origin are used. In the near future, perhaps all browsers will support the border-image attribute and the resulting code will look like this:

.box {    border-image: linear-gradient(to bottom, #000000 0%, #FFFFFF 100%);     border-image-slice: 1; /* set internal offset */}Copy the code

Z – the transition of the index

  

You may not know that Z-Index also supports transitions! At each step of the transition, its value doesn’t change, so you’d think it doesn’t support transitions — but it does.

Take a chestnut

currentColor

We can use this method to detect the current color to avoid constantly redefining it. This method is useful when working with SVG ICONS, because their color is determined by their parent element. Here’s how we usually do it:

.button { color: black; }.button:hover { color: red; }.button:active { color: green; }.button svg { fill: black; }.button:hover svg { fill: red; }.button:active svg { fill: green; }Copy the code

But we can do this with currentColor:

svg { fill: currentColor; }.button { color: black; border: 1px solid currentColor; }.button:hover { color: red; }.button:active { color: green; }Copy the code

Here are some other examples with fake elements:

a { color: #000; }a:hover { color: #333; }a:active { color: #666; }a:after, a:hover:after, a:active:after { background: currentColor; . }Copy the code

Object Fit

Can you remember a time when you set background-size to an image in order to solve a problem? You can now use object-fit, which is supported by WebKit browsers and will be supported by Firefox in the near future.

.image__contain { object-fit: contain; } .image__fill { object-fit: fill; }.image__cover { object-fit: cover; }.image__scale-down { object-fit: scale-down; }Copy the code

Take a chestnut

Styles of checkboxes and checkboxes

Let’s style check boxes without using images:

<! -- html --><input type="checkbox" id="check" name="check" /><label for="check">Checkbox</label>Copy the code
<! -- css -->input[type=checkbox] {display: none; }input[type=checkbox] + label:before { content: ""; border: 1px solid #000; font-size: 11px; line-height: 10px; margin: 0 5px 0 0; height: 10px; width: 10px; text-align: center; vertical-align: middle; }input[type=checkbox]:checked + label:before {content: "¹3"; }Copy the code

As you can see, we hide the checkboxes and use dummy elements and dummy classes instead:checked(IE9+) to represent it. When it is selected, a setting is set incontentUnicode encoded characters in the.

It is worth noting that Unicode encodings are written differently in CSS and HTML. In CSS it is a hexadecimal number starting with a backslash, while in HTML it is decimal, such as ✓ .

Then add some animations to our checkboxes:

<! -- checkbox -->input[type=checkbox] + label:before {content: "¹3"; color: transparent; transition: color ease .3s; }input[type=checkbox]:checked + label:before { color: #000; } <! -- radio -->input[type=radio] + label:before { content: "\u0016AB"; border: 1px solid #000; border-radius: 50%; font-size: 0; transition: font-size ease .3s; }input[type=radio]:checked + label:before { font-size: 10px; }Copy the code

Here are all the Unicode encodings, and what you can experience here.

Counters in CSS

CSS is known to use counters:

<! -- html --><ol class="list"> <li>a</li> <li>b</li> <li>c</li></ol>Copy the code
<! -- css -->.list { counter-reset: i; //reset conunter}.list > li { counter-increment: i; //counter ID}.list li:after { content: "[" counter(i) "]"; //print the result}Copy the code

We define an ID as the initial value in the counter-reset property (0 by default). You can set another value in the counter- Increment property as the increment value for each step.

Advanced CSS counter

You can calculate how many checkboxes are checked by the user:

<! -- html --><div class="languages"> <input id="c" type="checkbox"><label for="c">C</label> <input id="C++" type="checkbox"><label for="C++">C++</label> <input id="C#" type="checkbox"><label for="C#">C#</label> <input id="Java" type="checkbox"><label for="Java">Java</label> <input id="JavaScript" type="checkbox"><label for="JavaScript">JavaScript</label> <input id="PHP" type="checkbox"><label for="PHP">PHP</label> <input id="Python" type="checkbox"><label for="Python">Python</label> <input id="Ruby" type="checkbox"><label for="Ruby">Ruby</label></div>  <p class="total"> Total selected:</p>Copy the code
<! -- css -->.languages { counter-reset: characters; }input:checked { counter-increment: characters; }.total:after { content: counter(characters); }Copy the code

You can also make a simple calculator:

<! -- html --><div class="numbers"> <input id="one" type="checkbox"><label for="one">1</label> <input id="two" type="checkbox"><label for="two">2</label> <input id="three" type="checkbox"><label for="three">3</label> <input id="four" type="checkbox"><label for="four">4</label> <input id="five" type="checkbox"><label for="five">5</label> <input id="one-hundred" type="checkbox"><label for="one-hundred">100</label></div> <p class="sum"> Sum </p>Copy the code
<! -- css -->.numbers { counter-reset: sum; }#one:checked { counter-increment: sum 1; }#two:checked { counter-increment: sum 2; }#three:checked { counter-increment: sum 3; }#four:checked { counter-increment: sum 4; }#five:checked { counter-increment: sum 5; }#one-hundred:checked { counter-increment: sum 100; }.sum::after { content: '= ' counter(sum); }Copy the code

It also works, see the DEMO and article for details.

Do not use picture menu ICONS

Do you remember how often you were forced to need a “burger” icon?

  

There are at least 3 ways to do this:

1, we

.shadow-icon { position: relative; }.shadow-icon:after { content: ""; position: absolute; left: 0; top: -50px; height: 100%; width: 100%; box-shadow: 0 5px 0 #000, 0 15px 0 #fff, 0 25px 0 #000, 0 35px 0 #fff, 0 45px 0 #000; }Copy the code

2、 Gradient

.gradient-icon { background: linear-gradient(to bottom, #000 0%, #000 20%, transparent 20%, transparent 40%, #000 40%, #000 60%, transparent 60%, transparent 80%, #000 80%, #000 100%); }Copy the code

3、 UTF-8

You can just use ☰ (Unicode: U+2630, HTML: ☰). You can also set its color or size as flexibly as any other element. See the examples.

You can also use SVG, font ICONS, or border borders with pseudo-elements.

@Supports

This is a new CSS expression called SUPPORTS. As the name suggests, it can check whether certain Settings are supported by the browser. Not all browsers support it, but you can still use it as a basic check:

@supports (display: flex) {    div { display: flex; }}/*You can check prefixes*/@supports (display: -webkit-flex) or (display: -moz-flex) or (display: flex) {    section {        display: -webkit-flex;        display: -moz-flex;        display: flex;        float: none;    }}Copy the code

visibility: visible

What do you expect to happen if you place an element set to visibility: Visible inside an element set to visibility: hidden?

.hidden { visibility: hidden; }.hidden .visible { visibility: visible; }Copy the code

You might think that neither element is displayed-but in fact the entire parent element is hidden, while the child element is not. Please see the DEMO.

position: sticky

  

We found a new feature where you can create a new element with the sticky attribute. It works the same as Fixed, but does not block any elements. You’d better look at examples

Only Mozilla and Safari support this property, but you can also use it as follows:

.sticky { position: static; position: sticky; top: 0px; }Copy the code

We will get an element with the sticky attribute in supported browsers, and it will be a normal element in unsupported browsers. This is useful when you need to build a mobile page with irreplaceable, moveable elements.

New dimension unit

Not long ago, some new units of size were developed to describe the size of different elements. They are:

  • Vw (viewport Width) – 1% of the browser window width.

  • Vh (viewport height) – same as above, only used to describe height.

  • Vmin and vmax sets the maximum and minimum values between VH and VW.

Interestingly, almost all modern browsers support them well, so you can use them with confidence. Why do we need these new units? Because they make it easier to define different sizes, you don’t want to specify any percentages or anything for the parent element, see example:

.some-text { font-size: 100vh; line-height: 100vh; }Copy the code

Or you can set up a nice popup in the middle of the screen:

.blackSquare { background: black; position: fixed; height: 50vh; width: 50vw; left: 25vw; top: 25vh; }Copy the code

This looks pretty cool. Look at the codepen example

But there are still some shortcomings with regard to these new units:

  • IE9 should use VM instead of Vmin.

  • IOS7 may have bugs when using vh.

  • Vmax is not yet fully supported.

Literal sense

We can change how text looks when selected with a few lines of code:

*::selection { color: #fff; background: #000; }*::-moz-selection { /*Only Firefox still needs a prefix*/ color: #fff; background: #000; }Copy the code

You can define not only the color of the text when selected, but also the shadow or background color.

Touch screen elements scroll

If you need to set scrolling for elements on the touch screen, you need overflow: scroll/auto and -webkit-overflow-scrolling: touch. In fact, mobile browsers sometimes don’t perform overflow: Scroll/Auto correctly and it might scroll the entire page instead of the part you want. – Webkit-overflow-scrolling solves this problem, which you can experience in your actual projects.

Use hardware acceleration

Sometimes animations can cause the user’s computer to stall, and you can avoid this problem by using hardware acceleration in certain elements:

.block { transform: translateZ(0); }Copy the code

You won’t notice a difference, but browsers do 3D hardware acceleration for this element, which is useful until the special will-change attribute is fully supported.

Unicode Classes

You can use Unicode notation to specify class:

. ❤ {... }. ☢ {... }. ☭ {... Painted}. {... }. ☯ {... }Copy the code

But this is for fun and should never be used on large projects, as not all computers support Unicode symbols.

Percentage margin in the vertical direction

The vertical alignment is actually calculated based on the width of the parent element rather than the height. Define two elements:

<! -- html --><div class="parent"> <div class="child"></div></div>Copy the code
<! -- css -->.parent { height: 400px; width: 200px; }.child { height: 50%; padding-top: 25%; padding-bottom: 25%; width: 100%; }Copy the code

In theory, the child would be half as tall as the parent, but look what we have in practice:

Remember, the percentage of child elements is relative to the width of the parent element.

Firefox button margins

Firefox has its own way of calculating the margins of buttons. This sounds a little strange, but it automatically adds some margins:

This can be fixed by:

button::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner { border: none; padding:0; }Copy the code

Color + Border = Border-Color

Few people know that defining an element’s text color means that the element’s border color is also defined:

input[type="text"] { color: red; border: 1px solid; }Copy the code

The Easter eggs of the old browser

If you still need to adapt to IE7 or similar older browsers, you can define hacks with smiley faces, like this:

body { :) background: pink; }Copy the code