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

This article will share with you what are the advanced techniques for using CSS. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

1. Use CSS reset

CSS reset can maintain a consistent style on different browsers. You can use the CSS reset library Normalize, etc., or you can use a more simplified reset method:

*, *:: before,*::after {box-sizing: border-box; margin: 0; padding: 0;}

Now the margin and padding of the elements are available for 0recom BoxSumsizing to manage your CSS box model layout.

Demo

Note: if you follow the technique of inheriting from box-sizing, you don't need to add the box-sizing attribute to the above code.

two。 Inherit box-sizing

Inherit box-sizing from the html element:

Html {box-sizing: border-box;} *, *:: before,*::after {box-sizing: inherit;}

This makes it easy to change box-sizing in plug-ins or other components.

3. Use unset instead of resetting all properties

When you reset the attributes of an element, you do not need to reset each individual attribute:

Button {background: none; border: none; color: inherit; font: inherit; outline: none; padding: 0;}

You can use the all abbreviation to specify the attributes of all elements. Setting this value to unset changes the attribute of the element to its initial value:

Button {all: unset;}

Note: all shorthand is not supported in IE11 and Edge support is currently being considered. IE11 does not support unset.

4. Use the: not () selector to determine whether the form displays borders

Add a border to the element first

/ * add a border * / .nav li {border-right: 1px solid # 666;}

Remove the border for the last element

/ * remove the border * / .nav li:last-child {border-right: none;}

But don't do this, use the: not () pseudo class to achieve the same effect:

.nav li:not (: last-child) {border-right: 1px solid # 666;}

Of course, you can also use .nav li + li, but: not () is clearer and readable.

Demo 5. Add a row height for the body element

You don't have to do it for everyone

Add line-height one by one, directly to the body element:

Body {line-height: 1.5;}

Text elements can easily inherit the style of body.

Demo 6. Set for the form element: focus

Visual keyboard users rely on focus to determine the location of keyboard events on the page. Make the focus of the form element stand out and then be consistent with the browser's default implementation:

Box-shadow focus: none; outline: # 000 dotted 2px; outline-offset: .05em;} demo 7. Center any element vertically

No, no! This is by no means dark magic, it can really center any element vertically:

Html,body {height: 100%; margin: 0;} body {- webkit-align-items: center;-ms-flex-align: center; align-items: center; display:-webkit-flex; display: flex;}

... And CSS Grid:

Body {display: grid; height: 100vh; margin: 0; place-items: center center;}

Isn't that enough? Vertical, horizontal? Any element, any time, any place? CSS-Tricks has a good article about a variety of centring techniques.

Note: IE11's support for flexbox is a bit bug.

Demo 8. Comma separated list

Make each item of the list separated by a comma:

Ul > li:not (: last-child): after {content: ",";}

Since the last item does not add a comma, you can use: not () pseudo class.

Note: this technique is not ideal for accessibility, especially for screen readers. And copy and paste will not take away the content generated by CSS, which needs to be noted.

9. Use negative nth-child to select elements

Using a negative nth-child, you can select 1 to n elements.

Li {display: none;} / * Select elements 1 to 3 and display * / li:nth-child (- display 3) {display: block;}

Maybe you've mastered how to use the technique: not (), try this:

/ * Select all items except the first three and display them * / li:not (: nth-child (- nasty 3)) {display: none;}

It's so simple!

Demo 10. Use the SVG icon

There is no reason not to use the SVG icon:

.logo {background: url ("logo.svg");}

SVG zooms well at all resolutions and supports all browsers after IE9. Discard your .png, .jpg, or .gif-jif-whatev files.

Note: for buttons with only icons, the following styles are helpful for accessibility if SVG does not load successfully:

No-svg. Icon-only::after {content: attr (aria-label);} 11. Use an owl-like selector

The name may be unfamiliar, but the universal selector (*) works well with the neighboring sibling selector (+):

* + * {margin-top: 1.5m;}

In this example, all neighboring sibling elements in the document stream will be styled as margin-top: 1.5em.

For more "owl-like" selectors, please refer to the Heydon Pickering article on A List Apart

Demo 12. Use max-height to build a pure CSS slider

Max-height works with overflow hidden to build pure CSS sliders:

.slider {max-height: 200px; overflow-y: hidden; width: 300px;} .slider:hover {max-height: 600px; overflow-y: scroll;}

When you move the mouse over the slider element, increase its max-height value to show the overflow part.

13. Create tables of the same width as the grid

Table-layout: fixed can keep each grid equal in width:

.calendar {table-layout: fixed;}

Painless table layout.

Demo 14. Using Flexbox to remove excess margin

Instead of using nth-, first-, and last-child to remove extra gaps between columns, use the space-between property of flexbox:

.list {display: flex; justify-content: space-between;} .list .person {flex-basis: 23%;}

The gaps between columns are always uniform.

15. Use the property selector to select an empty link

When an element has no text content but has a href attribute, its href attribute is displayed:

A [href ^ = "http"]: empty::before {content: attr (href);}

It's pretty simple.

Demo 16. Define a style for the default link

Define a style for the default link:

A [href]: not ([class]) {color: # 008000; text-decoration: underline;}

Links inserted through the CMS system usually have no class attribute, and the above styles can distinguish them without affecting other styles.

17. Uniform vertical rhythm

The universal selector (*) is used with elements to maintain a consistent vertical rhythm:

.intro > * {margin-bottom: 1.25remr;}

Consistent vertical rhythm can provide visual beauty and enhance the readability of the content.

18. Fixed proportion box

To create a box with a fixed proportion, all you need to do is set a padding for div:

.container {height: 0; padding-bottom: 20%; position: relative;}. Container div {border: 2px dashed # ddd; height: 100%; left: 0; position: absolute; top: 0; width: 100%;}

Use 20% padding-bottom to make the box equal to 20% of its width. Regardless of the viewport width, the div of the child element maintains its aspect ratio (100% / 20% = 5:1).

Demo 19. Define styles for broken images

With a little CSS, you can beautify a broken image:

Img {display: block; font-family: sans-serif; font-weight: 300; height: auto; line-height: 2; position: relative; text-align: center; width: 100%;}

Use the rule of adding pseudo elements to display user information and references to URL:

Img::before {content: "We're sorry, the image below is broken: ("; display: block; margin-bottom: 10px;} img::after {content: "(url:" attr (src) ")"; display: block; font-size: 12px;}

Learn more about the skills of this style Ire Aderinokun original post.

20. Use rem to resize global; use em to resize local

After setting the basic font size for the root element (html {font-size: 100%;}), use em to set the font size for the text element:

H3 {font-size: 2em;} p {font-size: 1em;}

Then set the font size of the module to rem:

Article {font-size: 1.25remt;} aside .module {font-size: .9rem;}

Now, each module is independent, and the easier and flexible styles are easy to maintain.

21. Hide movies that are not muted and play automatically

This is a good technique for customizing user style sheets. Avoid automatic playback when the page is loaded. If there is no mute, the video is not displayed:

Video [autoplay]: not ([muted]) {display: none;}

Again, we take advantage of: not ().

twenty-two。 Use the selector: root to control font elasticity

In a responsive layout, the font size should be adjusted according to different viewports. You can calculate the font size based on the font size and width of the viewport height. You need to use: root:

: root {font-size: calc (1vw + 1vh + .5vmin);}

Now you can use root em

Body {font: 1rem/1.6 sans-serif;} 23. Set the font size for form elements for a better mobile experience

When the drop-down list is triggered, to avoid zooming the form elements on the mobile browser (IOS Safari, etc.), add font-size:

Input [type= "text"], input [type= "number"], select,textarea {font-size: 16px;}

: dancer:

24. Use pointer events to control mouse events

Pointer events allow you to specify how the mouse interacts with the elements it touches. To disable the default pointer event on a button, for example:

.button-disabled {opacity: .5; pointer-events: none;} Thank you for reading! This is the end of this article on "what are the advanced skills for using CSS?". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

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.