A set of tips to improve your CSS development capabilities

Source: Internet
Author: User

0. Catalogue

    • Directory
    • Introduction
    • Body
      • 1 use not to add a spacer to the navigation bar
      • 2 Adding the Line-height property to the BODY element
      • 3 arbitrary elements are centered vertically
      • 4 comma-delimited list
      • 5 using negative numbers in Nth-child
      • 6 using the SVG icon
      • 7 Text Display optimization
      • 8 using Max-height in pure CSS sliders
      • 9 Initializing Box-sizing
      • 10 table cell Width
      • 11 use Flexbox to get rid of various margin Hacks
      • 12 using an attribute selector for an empty connection
    • Statement

1. Introduction

Original: GitHub's a collection of useful CSS protips
Translator: Love the front-end music to share the Fedfun, free translation of the main improper place, welcome correction!
Translation: Improve your CSS development skills set, I hope to help you.

2. Text2.1 Use :not()Add an interval line to a navigation bar

We usually use the following code to add a spacer line to the navigation bar

/* add border */.navli{  border-right: 1px solid #666;}/* remove border */.navli:last-child{  border-right: none;}

Now, we can use :not() selectors to simplify the operation, the code is simple and easy to read, good.

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

Or, let's add the left border.

.navli:first-childli{  border-left: 1px solid #666;}
2.2 Adding the Line-height property to the BODY element

We do not need to give each p, H1 element set line-height , only need to set the BODY element, other text elements will automatically inherit the body's characteristics.

body{  line-height: 1;}
2.3 Arbitrary elements are centered vertically

It's not black magic, and it does allow any element to be centered vertically.

HTML,Body {  height: %;  margin: 0; }Body {  -webkit-align-items: center;     -ms-flex-align: center;   align-items: center;   display: -webkit-flex;  display: flex; }
2.4 Comma-delimited list

Make the HTML list look like a comma-delimited list of realities

ulli:not(:last-child)::after{  content: ",";}
2.5 in nth-childUse negative numbers in

Use negative numbers in the CSS to nth-child select 1~n Records.

li{  display: none;}/* select items 1 through 3 and display them */li:nth-child(-n+3){  display: block;}
2.6 Using the SVG icon

There is no reason not to use SVG icons, which can be scaled in most resolutions and browsers, or even compatible with IE9, so no more. png,. gif, and so on.

.logo{  background: url("logo.svg");}
2.7 Text display optimization

Some fonts can no longer be optimally displayed on all devices, so they need to be set.

html{  -moz-osx-font-smoothing: grayscale;  -webkit-font-smoothing: antialiased;  text-rendering: optimizeLegibility;}

Note that optimizeLegibility the use of attribute values is not supported at the same time Ie/edge text-rendering .

2.8 using Max-height in pure CSS sliders

Use Max-height to implement hidden, displayed animations.

.slider   UL  {max-height :  Span class= "Hljs-value" > 0   ; overlow :  hidden  ;    .slider  :hover  ul  {max-height :  1000  px   ; transition :  3  s ease  ;     

See Benbow "Auto Value CSS3 Transition solution"

2.9 Initialization box-sizing

Inherit attributes from HTML box-sizing , so that later maintenance is more convenient.

html{  box-sizing: border-box;}*, *:before, *:after{  box-sizing: inherit;}
2.10 table cell width
.calendar{  table-layout: fixed;}
2.11 Use Flexbox to get rid of various margin Hacks

When implementing the sidebar, we no longer need a variety of nth- , first- and last-child other set margin, can be used flexbox easy to achieve uniform distribution.

.list{  display: flex;  justify-content: space-between;}.list.person{  flex-basis: 23%;}
2.12 using an attribute selector for an empty connection

For a that has an HREF attribute but empty content, the content is added automatically.

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

It's very convenient, isn't it.

3. Disclaimer

Love front-end music to share the FEDFUN,CSDN expert blog, Wang Haiqing hope to help you, limited to the author level limited, error inevitably, welcome to shoot Bricks!
Welcome any kind of reprint, please indicate loading, keep this paragraph text.
This text link http://blog.csdn.net/whqet/article/details/48997389
Independent blog Http://whqet.github.io
Sina Weibo Http://weibo.com/FedFun

A set of tips to improve your CSS development capabilities

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.