Original link:22 Essential CSS Recipes
More translations will be released one after another. Welcome to praise+collection+attentionMy columnTo be continued.

---

Hello everyone, today we will introduce some very practical CSS tips, let’s get started!

Mixed mode

Not long ago Firefox and Safari browsers started to support Photoshop-like mixed modes, but prefixes need to be added to Chrome and Opera browsers. Take a chestnut:

//You can also try different styles
 
 .blend {
 background: #fff;
 }
 .blend img {
 mix-blend-mode: darken;
 }

Online experience address

Gradient border

Now, you can even use gradients in the borders.
To use a gradient border is very simple, just set a lower one.z-indexThe pseudo element of:

.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);
 }

Specific examples can be seenHereOr lookHereWhat is used isbackground-clipAndbackground-originProperty. In the near future, perhaps all browsers will support it.border-imageProperty, the final code will look like the following:

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

Transition of z-index

Maybe you don’t knowz-indexAlso support the transition! In each step of the transition, its value does not change, so you think it does not support the transition-but in fact it does.
Take a chestnut

currentColor

We can use this method to detect the current color to avoid defining it repeatedly.
This method is very useful when using SVG icons because their colors are determined by their parent elements. Usually we do this:

.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;
 }

But we can use itcurrentColorTo do this:

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

Attach other examples with pseudo elements:

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

Object Fit

Do you remember setting up a background map to solve some problemsbackground-sizeWhat about the time of the attribute? Now you can use itobject-fitProperty, webkit browser supports it, Firefox will also support it 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;
 }

Take a chestnut

Style of radio and check boxes

Let’s style the check boxes together without using pictures:

<!  -- html -->
 <input type="checkbox" id="check" name="check" />
 <label for="check">Checkbox</label>

<!  -- 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: "\2713";
 }

As you can see, we have hidden the original check box and used pseudo elements and pseudo classes instead.:checked(IE9+) to show it. When it is selected, one is set tocontentUnicode-encoded characters in will be displayed.

It is worth noting that Unicode encoding is written differently in CSS and HTML. In CSS it is a hexadecimal number starting with a backslash, while in HTML it is decimal, for example✓.
Then add some animation effects to our check boxes:

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

HereIs all Unicode encoding, and can be used inHereExperience.

Counters in CSS

It is well known that counters can be used in CSS:

<!  -- html -->
 <ol class="list">
 <li>a</li>
 <li>b</li>
 <li>c</li>
 </ol>

<!  -- css -->
 .list {
 counter-reset: i;  //reset conunter
 }
 .list > li {
 counter-increment: i;  //counter ID
 }
 .list li:after {
 content: "[" counter(i) "]";  //print the result
 }

We have defined an ID in thecounter-resetProperty as the initial value (default is 0). You can set another value incounter-incrementProperty as an incremental value for each step.

Advanced CSS counters

You can calculate how many check boxes have been 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>

<!  -- css -->
 .languages {
 counter-reset: characters;
 }
 input:checked {
 counter-increment: characters;
 }
 .total:after {
 content: counter(characters);
 }

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>

<!  -- 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);
 }

It also works, please see the specificDEMOAndArticle.

Menu icons that do not use pictures

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

There are at least three ways to achieve it:
1、 Shadows

.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;
 }

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%);
 }

3、 UTF-8
You can use standard symbols directly: (Unicode: U+2630, HTML:). You can also set its color or size as flexibly as other elements. LookExample.
You can also use SVG, font icons, or through pseudo-elementsborderBorder.

@Supports

This is a new one calledsupportsCSS expression for. As the name implies, it can detect whether certain settings are supported by browsers. Not all browsers support it, but you can still use it as a basic detection method:

@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;
 }
 }

visibility: visible

According to your estimation, set one tovisibility: visibleThe element of is placed in a set tovisibility: hiddenWhat will happen in the elements of?

.hidden {
 visibility: hidden;
 }
 .hidden .visible {
 visibility: visible;
 }

You may think that neither element is displayed-but in fact the entire parent element is hidden, while the child element is not. Please look at itDEMO.

position: sticky

We have found a new feature, you can create a new one.stickyThe element of the attribute. Its operation effect andfixedSame, but does not block any elements. You’d better have a look.Example
Only Mozilla and Safari browsers support this attribute, but you can also use it as follows:

.sticky {
 position: static;
 position: sticky;
 top: 0px;
 }

We will get one of the supported browsers.stickyAttribute, which will be a common element in unsupported browsers. This is very useful when you need to create a mobile page of irreplaceable and movable elements.

New dimension unit

Not long ago, some new size units to describe the sizes of different elements came out. 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 set the maximum and minimum values between vh and vw.

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

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

Or you can set a beautiful pop-up box in the middle of the screen:

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

This looks cool. Look at the one at codepen.ExampleRight ~
However, there are still some deficiencies regarding these new units:

• IE9 should use vm instead of vmin.

• IOS7 may have bugs when using vh.

• Vmax has not received full support so far.

Text modification

We can modify the effect when the text is selected through a few lines of code:

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

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

Elements in Touch Screen Scroll

If you need to scroll through some element settings in the touch screen, you not only need tooverflow: scroll / auto, also need to-webkit-overflow-scrolling: touch;
In fact, the mobile browser does not perform correctly at certain times.overflow: scroll / auto, it may scroll through the page instead of the part you want.-webkit-overflow-scrollingTo solve this problem, you can experience it in your actual project.

Use hardware acceleration

Sometimes animation may cause users’ computers to jam. You can use hardware acceleration in specific elements to avoid this problem:

.block {
 transform: translateZ(0);
 }

You won’t notice any difference, but the browser will speed up the 3D hardware for this element inwill-changeThis method is useful until this special attribute is fully supported.

Unicode Classes

You can use Unicode symbols to name class:

.❤ {
 ...
 }
 .☢ {
 ...
 }
 .☭ {
 ...
 }
 .★ {
 ...
 }
 .☯ {
 ...
 }

But this is actually for fun. Never use it in large projects, because not all computers support Unicode symbols.

Percentage margin in vertical direction

In fact, the vertical alignment calculation is based on the width of the parent element, not the height. Define two elements:

<!  -- html -->
 
 <div class="parent">
 <div class="child"></div>
 </div>

<!  -- css -->
 
 .parent {
 height: 400px;
 width: 200px;
 }
 .child {
 height: 50%;
 padding-top: 25%;
 padding-bottom: 25%;
 width: 100%;
 }

In theory, the height of the child element will be half that of the parent element, but look at what we actually get:

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

Firefox browser button margins

Firefox uses its own way to calculate the button margins. This may sound strange, but it automatically adds some margins:

The following methods can be used to fix this problem:

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;
 }

Color + Border =Border-Color

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

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

The Egg of the Ancient Browser

If you still need to adapt IE7 or similar old browsers, you can use smiley face symbols when defining hack, like this:

body {
 :) background: pink;
 }

Isn’t it interesting?

---

If you think my translation is good, please praise the collection and pay attention to it.My column, I will introduce more wonderful content one after another. If you find any mistakes or omissions, please correct them and we’ll see you next time!