January 19, 2016 at 01:59

Some practical CSS tips


    CSS Protips

    This is a modern solution to common problems, a collection of tips that will help you improve your professional CSS skills.

    From translator

    Greetings, another translation of CSS related notes has been prepared for you. Portland developer Matt Smith shared CSS tips and posted them on GitHub . I especially liked his selection, it is structured, not particularly cumbersome in terms of boring large texts and descriptions, and in general even a beginner will understand. I will be glad if in the comments we discuss each item and eventually give some conclusions. So let's get started.



    Contents


    1. We use the pseudo-class: not to set the navigation frame
    2. Add line spacing to the body element
    3. Center everything vertically
    4. Correctly Separate List Items with Commas
    5. Negative serial number in nth-child
    6. We use SVG logos
    7. Axiomatic CSS
    8. CSS slider maximum height
    9. Inherit box-sizing
    10. Same cell width
    11. Dynamic indentation with flexbox
    12. We use the attribute selector for empty links
    13. Default Styles for Plain Links


    We use the pseudo-class: not to set the navigation frame


    Instead of setting the border in this way ... 
    /* добавляем рамку */
.nav li {
  border-right: 1px solid #666;
}

    ... and even reset the border to the last element ... 
    /* удаляем рамку */
.nav li:last-child {
  border-right: none;
}

    ... you could just use the pseudo-class: not (), which will help us select only the elements we need: 
    .nav li:not(:last-child) {
  border-right: 1px solid #666;
}

    Of course, you could use such a selection .nav li + li or even .nav li: first-child ~ li , however, if we intentionally use: not (), it is clear to us that CSS defines the border for all elements except the last, and now any person will understand what is happening here. This method is supported in IE9 + and the rest.

    Add line spacing to the body element


    You should not add line height for each paragraph or heading (<p>, ), respectively, defining each element. Instead, add this code to the body of the body element:
    body {
  line-height: 1;
}

    In this way, any text elements inherit this property from the main parent body element.

    Center everything vertically


    No, this is not black magic, you 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;
}

    Want to center somehow else? Vertically, horizontally ... somehow, somewhere? At CSS-Tricks you can read the article and then you can do anything you want. The example has support in IE11 + and the rest.

    Note : Watch out for flexbox bugs (errors) in IE11 and control the html-layout process.

    Correctly Separate List Items with Commas


    We can make our li elements so that they really look like a real list, whose entries are separated by commas:
    ul > li:not(:last-child)::after {
  content: ",";
}

    Using the pseudo-class: not (), we add a comma after each element of the ul list, except for the last.

    Negative serial number in nth-child


    Use the negative arguments in nth-child to select items 1 through n.
    li {
  display: none;
}
/* выбираем элементы с 1 по 3 и отображаем их */
li:nth-child(-n+3) {
  display: block;
}

    Or, now that we know everything about using the pseudo-class: not (), we can try this:
    /* скрываем все элемента ul-списка, кроме элементов с 1 по 3 */
li:not(:nth-child(-n+3)) {
  display: none;
}

    Well, that was pretty easy.

    We use SVG logos


    No, no reason not to use SVG:
    .logo {
  background: url("logo.svg");
}

    SVG scales well to any resolution and is supported in all browsers, IE9 +. Now we can use svg instead of .png, .jpg, or .gif files.

    Note : If you have an SVG icon for only one button and, in case the SVG has not been loaded, you can use the available text prompt:
    .no-svg .icon-only::after {
  content: attr(aria-label);
}


    Axiomatic CSS


    Lobotomized owl (axiomatic CSS), yes, this is a rather strange name, but using the universal selector (*) and single-level selector (+) you can get powerful CSS features:
    * + * {
  margin-top: 1.5em;
}

    In this example, all elements in the stream that are located after another element should receive an indent equal to 1.5em . You can read more about the " lobotomized owl in an article by Haydon Pickering, or a translation in Russian .

    CSS slider maximum height


    You can implement the CSS slider using "max-height" and "overflow: hidden" :
    .slider ul {
  max-height: 0;
  overflow: hidden;
}
.slider:hover ul {
  max-height: 1000px;
  transition: .3s ease; /* анимация для max-height */
}


    Inherit box-sizing


    Let box-sizing inherit from html:
    html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

    Now it’s easier for us to control box-sizing in plugins or components that use their own rules of behavior. Support in IE8 + and the rest.

    Same cell width


    Sometimes, tables can be painful to work, so try using table-layout: fixed to use cells of the same width:
    .calendar {
  table-layout: fixed;
}

    We get rid of the pain with table-layout . Support in IE8 + and the rest.

    Dynamic indentation with flexbox


    When working with a column layout, you can get rid of the use of css selectors nth- * , first- * , and last-child with the flexbox value space-between :
    .list {
  display: flex;
  justify-content: space-between;
}
.list .person {
  flex-basis: 23%; /* базовый размер отдельно взятого блока */
}

    Support in IE11 + and others.

    We use the attribute selector for empty links


    Display links when the a-element has no text value, but the href attribute contains a link:
    a[href^="http"]:empty::before {
  content: attr(href);
}

    It is quite convenient. Support in IE9 + and the rest.

    Default Styles for Plain Links


    Add default link style:
    a[href]:not([class]) {
  color: #008000;
  text-decoration: underline;
}

    Now links inserted through the visual editor of your CMS, which usually do not have a class, will be different from the rest of the links without affecting the cascade.
    Tags:

    Also popular now: