CSS Professional Tips

using CSS Reset

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

* {  border-box;  0;  0;}  

Now that the element's margin and padding are 0, box-sizing you can manage the layout of your CSS box model.

Note: If you follow the next inheritance box-sizingTo explain this technique, you do not need to add in the above code box-sizingProperty.

Inheritancebox-sizing

htmlinherit from element box-sizing :

HTML {  border-box;} **inherit;}   

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

Use :not()Selector to determine whether the form displays a border

Add a border to an element first

*/li {  1#666;}  

Remove a border for the last element

*/linone;} 

Do not, however, use :not() pseudo-classes to achieve the same effect:

Li: Not (: last-child) {  1#666;}   

Of course, you can also use .nav li + li or .nav li:first-child ~ li , but :not() more clearly, have readability.

For bodyElement Add Row Height

You do not have to add the elements to each <p> line-height element individually, and add them directly to the body elements:

Body {  1.5;}

Text elements can be easily inherited body by styles.

Center any element vertically

No! This is not black magic, really can be vertically centered on any element:

Body {  %;  0;} Flex;}   

That's not enough? Vertical direction, horizontal direction? Any element, any time, any place? Css-tricks has a good article about the various centering techniques.

Note: IE11 support for Flexbox is a bit of a bug.

Comma separated list

Make each item of the list separated by commas:

Li: Not (: last-child)",";}   

Pseudo-class can be used because the last item does not have a comma :not() .

Note: This technique is not ideal for accessibility, especially for screen readers. and copying and pasting does not take away CSS-generated content, you need to be aware.

Use a negativenth-childTo select an element

Use negative to nth-child select between 1 and n elements.

Li {  none;} */li: Nth-child (block;}    

Perhaps you have mastered how to use :not() this technique and try this:

*/li: Not (: Nth-child (none;}   

So simple!

Using the SVG icon

There is no reason not to use the SVG icon:

. logo {  url ("Logo.svg");}  

SVG scales well at all resolutions and supports all IE9 later browsers, discarding your. png,. jpg, or. gif-jif-whatev file.

Note: For icons-only buttons, the following styles are useful for accessibility if SVG is not loaded successfully:

. icon-only: After {  attr (aria-label);}  

Use the "Owl-shaped" selector

The name may be unfamiliar, but the Universal selector ( * ) is used with the neighboring sibling selector ( + ) for extraordinary results:

* {  1.5em;} 

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

More "owl-shaped" selector, can refer to a List Apart above Heydon Pickering article

Usemax-heightTo create a plain CSS slider

max-heightTo create a plain CSS slider with overflow hidden:

. slider {  px;  px;} . SliderScroll;}      

The max-height overflow section can be displayed by increasing its value when the mouse is moved into the slider element.

Back to Catalog

Create Grid-width tables

table-layout: fixedAllows each lattice to remain equal width:

. calendar {  fixed;}

Painless table layout.

Use Flexbox to remove excess margin

Instead of using nth- , first- and last-child removing the extra gap between columns, use the Flexbox space-between property:

. list {  flex;  Space-between;} %;}   

The gap between columns is always evenly equal.

Use the property selector to select an empty link

When an <a> element has no textual content, but has href attributes, it displays its href properties:

a[href^="http"]: Emptyattr (href);}      

Quite simple.

Define a style for the "default" link

Define a style for the default link:

a[href]: not ([class]) {  underline;}   

Links inserted through CMS systems, usually without class attributes, can be screened by the above styles without affecting other styles.

Consistent vertical Rhythm

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

* {  1.25rem;} 

Consistent vertical rhythm provides visual aesthetics and enhances readability of content.

Fixed proportional box

To create a box with a fixed scale, all you need to do is set a padding for the 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 the height of 20% of its width. Regardless of viewport width, the sub-element's div retains its aspect ratio (100%/20%= 5:1).

Defining styles for broken images

Just a little bit of CSS can beautify broken images:

img {    block;  %;}  

To display a reference to the user information and URL by adding a pseudo-element rule:

IMG: Before {    "We ' re sorry, the image below is broken:(;} imgattr (")px;}        

Learn more about this style of Ire Aderinokun's original posts.

UseremTo adjust the global size;emTo adjust the local size

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

H2 {   2em;} p {  1em;}    

Then set the module's font size to rem :

Article {  1.25rem;} . 9rem;}   

Now, each module becomes independent, easier and more flexible to maintain.

Hide movies that don't mute, autoplay

This is a good technique for customizing user style sheets. Avoid playing automatically when the page loads. If it is not muted, the video is not displayed:

video[AutoPlay]: not ([muted]) {  none;}   

Again, we took advantage :not() of the advantages.

Using selectors:rootTo control font elasticity

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

: root {  calc (11. 5vmin);}    

You can now use theroot em

Body {  1rem/sans-serif;}  

Set the font size for a form element for a better mobile experience

<select>to avoid zooming in the form element on the mobile browser (IOS Safari, etc.) when the drop-down list is triggered, plus font-size :

input[Type="Text"],input[type="Number"],Select,  px;}           

Support situation

These tips apply to the latest versions of Chrome, Firefox, Safari, Opera, Edge, and IE11.

CSS Professional Tips