Shulou(Shulou.com)06/01 Report--

This article mainly introduces the necessary CSS tips have what knowledge, detailed and easy to understand, simple and fast operation, has a certain reference value, I believe that everyone will read this essential CSS tips have what articles will be harvested, let's take a look at it.

Firefox and Safari have recently started to support Photoshop like blend mode, but in Chrome and Opera you need to add a prefix. Take a chestnut:

mixed mode

Gradient border

Now, you can even use gradients in borders. To use a gradient border, it is very simple to set a pseudo-element with a lower z-index:

Gradient border

Examples can be found here, or see here using the background-clip and background-origin attributes. In the near future, perhaps all browsers will support the border-image attribute, and the final code will look like this:

border-image

Maybe you didn't know z-index also supports transitions! Its value doesn't change at every step of the transition, so you think it doesn't support transitions-but it does.

Z-index transition

We can use this method to detect the current color to avoid defining it repeatedly. This method is useful when working with SVG icons because their color is determined by their parent element. This is what we usually do:

SVG Color

But we can use currentColor to do this:

currentColor

Other examples with pseudo-elements are attached:

pseudo-elements

Do you remember when you set the background-size property on a background image to solve some problems? Now you can use object-fit attributes, webkit browsers support it, Firefox will soon support it.

Object Fit

example

Let's style the checkbox together without using pictures:

Styles for radio boxes and check boxes

22 Essential CSS Tips for Translating

Styles for radio boxes and check boxes

As you can see, we hide the check box and instead represent it with pseudo-elements and pseudo-classes:checked (IE9+). When it is selected, a Unicode encoded character set in content will be displayed.

It is worth noting that Unicode encoding is written differently in CSS and HTML. In CSS it's a hexadecimal number starting with a backslash, whereas in HTML it's decimal, such as âTM ¥. Then add some animation to our checkboxes:

Styles for radio boxes and check boxes

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

Counters in CSS

Counters in CSS

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

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

Advanced CSS counters

Advanced CSS counters

You can also create a simple calculator:

simple calculator

simple calculator

It also works, see DEMO and article for details.

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

There are at least three ways to do this:

1、 Shadows

Shadows

2、 Gradient

Gradient

UTF-8 You can use the standard notation: (Unicode: U+2630, HTML: ). You can also set its color or size flexibly like any other element. Look at examples. You can also use SVG, font icons, or border frames via pseudo-element settings.

This is a new CSS expression called supports. As the name suggests, it detects whether certain settings are supported by browsers. Not all browsers support it, but you can still use it as a basic means of detection:

@Supports

In your estimation, what happens when you put an element set to visibility: visible inside an element set to visibility: hidden?

visibility: visible

You might think that neither element is visible--but in fact the entire parent element is hidden, and the child element is not.

position: sticky

We found a new feature where you can create a sticky element. It works the same as fixed, but it doesn't block any elements. You'd better look at the example only Mozilla and Safari support this property, but you can also use it like this:

position: sticky

We'll get a sticky element in supported browsers, and a normal element in unsupported browsers. This is useful when you need to create a mobile page with irreplaceable, mobile elements.

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

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 size, you don't specify any percentages or anything for parent elements, see examples:

vh

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

vh

This looks cool, check out the examples in codepen ~ but there are still some drawbacks to these new units:

We can modify the effect of selected text with a few lines of code:

Text modification

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

If you need to scroll within the touch screen settings for some elements, then you need not only overflow: scroll / auto, but also-webkit-overflow-scrolling: touch; in fact, mobile browsers sometimes do not execute overflow: scroll / auto correctly, it may scroll the entire page instead of the part you want. - Webkit-overflow-scrolling solves this problem, and you can try it out in your actual projects.

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

3D hardware acceleration

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

You can name classes with Unicode notation:

Naming classes with Unicode symbols

But this is meant to be funny, and should never be used in large projects, as not all computers support Unicode symbols.

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

Percentage margin in vertical direction

Theoretically, the height of a child element would be half the height of its parent element, but look at what we actually get:

Percentage margin in vertical direction

Remember that the percentage of a child element is relative to the width of the parent element.

Firefox calculates button margins in its own way. This sounds strange, but it automatically adds some margins:

22 Essential CSS Tips for Translating

You can fix this problem by:

Fix Firefox button margins

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

Color + Border = Border-Color

If you still need to adapt to IE7 or similar older browsers, you can use smiley faces when defining hacks, like this:

About "What are the essential CSS tips" The content of this article is introduced here, thank you for reading! I believe everyone has a certain understanding of the knowledge of "what are the essential CSS tips". If you still want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.