Geekly Articles each Day
📜 ⬆️ ⬇️

A collection of practical tips and notes on the layout

CSS Refresher


This is a large collection of practical tips and notes on the layout. A kind of memo for those who use CSS every day. It covers a variety of topics, from the details of the behavior of floating elements to the use of SVG and sprites. The project is constantly updated, the active github community is also taking part in it, interesting comments are added there, about which you may not have heard.

From translator


Greetings to all, my name is Maxim Ivanov, and today I have prepared for you the translation of developer notes from San Francisco Vasant Krishnamoorthy ( CSS Refresher ) from San Francisco. Web programming is one of the fastest growing industries in our time. It would seem, take some video tutorial on tuts + and master the html-layout, however, as Opera Software developer Vadim Makeev said, speaking at the CodeFest conference, they still do it badly. But let's see, maybe we all know that.

Content


  1. Positioning
  2. Display element in the document (display)
  3. Floating elements
  4. CSS selectors
  5. Effective selectors
  6. Redraw and recalculate
  7. CSS3 properties
  8. CSS3 media queries
  9. Adaptive web design
  10. CSS3 transitions
  11. CSS3 animations
  12. Scalable Vector Graphics (SVG)
  13. CSS sprites
  14. Vertical alignment
  15. Known Issues


1. Positioning


CSS provides us with up to 5 different values ​​for the position property. But essentially, only 4 of these are commonly used.
div { position: static; /*   */ position: relative; position: absolute; position: fixed; position: inherit; /*   */ }

Static (static, default):


')
Relative (relative):



Absolute :



Fixed (fixed):



Inheritance :



In summary :



Reefs :



To read :

Absolute, Relative, Fixed Positioning: How Do They Differ?
CSS Positioning 101
Learn CSS Positioning in Ten Steps

2. Display elements in the document


Each element on a web page is a rectangular block. Properties display determines how this rectangular block should behave, what it should be.

 div { display: inline; display: inline-block; display: block; display: run-in; display: flex; display: grid; display: none; }


By default, all elements are lower-case (inline), except for those who are explicitly indicated by the browser as block. At best, with your custom styles, you can reset the line item by setting it to “block”.

Inline :



Inline- block:



Block (block):



Context (run-in):



Hidden (none):



Tabular (table):



 div { display: table; display: inline-table; /*  ,    inline-block */ display: table-cell; display: table-column; display: table-colgroup; display: table-header-group; display: table-row-group; display: table-footer-group; display: table-row; display: table-caption; }


To use, simply mimic the normal structure of the table. Example:
 <div style="display: table;"> <div style="display: table-row;"> <div style="display: table-cell;"> ,   . </div> </div> </div>


Adaptable (flex):



Grid (grid):



To read :

Flexbox Froggy
CSS Almanac: Display
The Difference Between “Block” and “Inline”
Learn CSS Layout: The “display” property

3. Floating elements


 div { float: none; /*   */ float: left; float: right; float: inherit; }



Hack: for cleaning floating elements it is better to apply 'overflow: auto' to the parent element.

Please note that this trick does not clear floating elements - it simply stretches the parent container. You can forcibly clear a float if you add a cleansing element after the last floating element, or you can add in any place you need, thereby creating a new stream. The parent element does not know how to clear child floating elements.

9 rules :

1. Floating elements are pressed to the borders of their containers, but no further.

2. Any floating element will be located either near or below the previous element. If the elements are pressed to the left, the second element appears exactly to the right of the first. If they are pressed to the right, the second element will appear to the left of the first (reverse).

3. An element with a left wrap cannot be more to the right than an element with a right wrap.

4. Floating elements cannot rise above the top edge of the parent container (however, it becomes even more difficult when indents are involved).

5. A floating element cannot be higher than its floating element neighbor.

6. A floating element cannot be higher than its line element neighbor.

7. A floating element, together with its same neighbor element, cannot extend beyond the edges of the parent container.

8. The floating element should be placed as high as possible.

9. An element with a left wrap should be placed as far to the left as possible; an element with a right wrap should be placed as far to the right as possible.

Reefs :

 <img src="http://lorempixum.com/200/200/"> <p>Lorem ipsum...</p> 


 img { float: right; margin: 20px; }


The external indents that we add to the paragraph are applied far to the right of the image. This is because the image is a block! That is why it does not increase the space between the image and the paragraph.

To read :

Clearing floats
Everything You Never Knew About CSS Floats
CSS Floats 101

4. CSS selectors


 div#container > ul { border: 1px solid black; }


The difference between the XY and X> Y samples is that in the latter, only direct descendants will be selected.

 ul ~ p { color: red; }


This selector is similar to X + Y, but it is less strict. While the adjacent selector (ul + p) selects only the first element that immediately preceded after p, in our case, this is a more generalized sample. In our case, it will select all the p elements following the ul element.

 a[href*="google"] { color: #1f6053; }


A star means that the specified value should appear somewhere in the attribute value.

 a[href^="http"] { background: url(path/to/external/icon.png) no-repeat; padding-left: 10px; }


If we want to select all links that have an href attribute starting with http, then we can use this selector shown above.

 a[href$=".jpg"] { color: red; }


And again, we use the regular expression symbol - $, which searches from the end of the line. In this case, we are looking for all links to images ending in the JPG format.

 a[data-info~="image"] { border: 1px solid black; }


Tilde (~), a character that allows you to search for an attribute that has values ​​separated by a space.

 div:not(#container) { color: blue; }


Selects all div elements, with the exception of one, an element that has a container id.

 p::first-line { font-weight: bold; font-size: 1.2em; }


We can use pseudo-elements (symbol: :) in the style of element fragments, for example, select the first line or the first letter of an element. This only works for block elements.

 li:nth-child(3) { color: red; }


nth-child pseudo-classes are focused on specific elements in the stack (a set of elements of the same type). It takes an integer as a parameter, however, the count does not start from scratch. If you want to pull out the second list item, use li: nth-child (2). We can even use to pull out alternating items in the stack, to select a variable set we need to pass a variable (increment) as a parameter. For example, we can pull out every fourth list item in this way li: nth-child (4n).

 li:nth-last-child(2) { color: red; }


What if you have a huge list of items in UL, and we only need the penultimate item? Suppose we have a list of 10 elements, we could do li: nth-child (9), but if we do not know the number of elements, in this case, it is better to use the option shown above.

 li:first-child { border-top: none; } li:last-child { border-bottom: none; }


This is especially useful when defining frames and indents for lists and tables.

To read :

The 30 CSS Selectors you Must Memorize

5. Effective selectors


Below is a list of selectors in order of effectiveness (based on the element search speed and performance). Identifiers are the most effective, and pseudo-classes and pseudo-elements are the least effective.

 id (#myid) class (.myclass) tag (div, h1, p) adjacent sibling (h1 + p) child (ul > li) descendant (li a) universal (*) attribute (a[rel=”external”]) pseudo-class and pseudo-element (a:hover, li:first-*, li:last-*)


To read :

CSS Selectors: Should You Optimize Them To Perform Better?

6. Redrawing and recalculation


Redraw (repaint):

Also known as redraw is an event that occurs whenever something is made visible on the page, if it was previously hidden (visibility: hidden, overflow: hidden, display: none, and others), or vice versa (visibility: visible, overflow: auto, display: static, and others), when there are any changes in the layout. An example would be anything: adding a frame to an element, changing the background color, changing the visibility of styles — all of this leads to a redrawing of the page. Thus, this event can be costly for you in terms of performance, since it loads the browser engine with a search, passes through all elements to determine what is already visible and what should be displayed.

Recalculation (reflow):

Recalculation (or re-arrangement) is more significant. This event will occur whenever a manipulation of the HTML document's DOM tree occurs, or when the style that affects the layout changes on the element, this event will occur whenever the class attribute on the element changes, or whenever browser window size The purpose of the recalculation is to determine where the various parts of the sites should now be displayed. If you change the parent properties, then its children will also be recalculated. , , DOM , . , , . , .

, , , .

(minimal reflow):

, -. , . HTML- . , , , , . , , , , , DOM-.

, , . , .

:

—
—
—
— ,
— CSS -, , :hover
— class
— DOM-
— offsetWidth offsetHeight
— style

, (Paul Irish), , DOM .

:

— , ( DOM-).
— .
— , .
— .
.
— «CSS expressions» ( , «IE expressions»)

:

, , . , . , , .

, , , , . css-. 3000 , , . , styles.css , .

To read :

Reflows & Repaints: CSS performance making your JavaScript slow?
Writing efficient CSS selectors
Why do browsers match CSS selectors from right to left?
CSS performance revisited: selectors, bloat and expensive styles

7. CSS3


border-radius :

 -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;


. .

, CSS3 , (-webkit-, -moz-, -ms-, -o-) css-, css- css-.

box-shadow :

 -webkit-box-shadow: 1px 1px 3px #292929; -moz-box-shadow: 1px 1px 3px #292929; box-shadow: 1px 1px 3px #292929;


( ) , , , .

css3 , IE.
: IE9+

box-shadow : x-, y-, , .

, , .

, , .

, . , , .

, . , , .

 -webkit-box-shadow: 0 0 20px #333 inset; -moz-box-shadow: 0 0 20px #333 inset; box-shadow: 0 0 20px #333 inset;


'insert' , . , .

: IE9+

text-shadow :


 color: #fff; text-shadow: 0 0 50px #333;


, , . , , , .

, box-shadow , .

box-shadow, . , :

 text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -18px 18px #f20;


: IE10+

:

You can declare the element's background as a solid color, or you can also set it with a gradient. Using gradients declared in CSS, it is better to use file images, so better for control and performance.

Gradient is usually one color that flows smoothly into another, but in CSS you can control every aspect of how it all happens, from direction to color saturation.

 .gradient { /*    */ background-color: red; /*   ,     */ background-image: linear-gradient(red, orange); /*     ,  -,  ,      */ background: red; background: linear-gradient(red, orange); }


Support: IE10 +

Linear gradients :

, . -, -, , . , -. -, , , «to right», , «». «to» . . . , . «color-stops».

 .gradient { height: 100px; background-image: linear-gradient( to right, red, yellow 10% ); }


:

, , , , , , , .

, :
— : WebKit , from() color-stop()
— : , , «to left»
— : , , «to right»

, . 0deg , ( ) 0deg .

: OLD (or TWEENER) = (450 — new) % 360
: NEW = 90 — OLD, OLD = 90 — NEW
: linear-gradient(135deg, red, blue)
: linear-gradient(315deg, red, blue)

:

, . , , , , , .

, , . , . .

: -, , , - . : « , , ». , «at ______» .

:

, :
— : WebKit , from() color-stop()
— : , , , ( ) , .
— : , «circle closest-corner at top right»

autoprefixer postcss , .

:

. 20 , ( ) 20 20px .

 .repeat { background-image: repeating-linear-gradient( 45deg, yellow, yellow 10px, red 10px, red 20px /*   */ ); }


.

To read :

Box-shadow, one of CSS3's best new features
CSS Almanac: box-shadow
CSS Gradients

8. CSS3 -


Media-, , . CSS , .

- ( ):
— -, HTML XHTML:

 <link rel="stylesheet" type="text/css" media="all and (color)" href="/style.css">


— -, XML:

 <?xml-stylesheet media="all and (color)" rel="stylesheet" href="/style.css" ?>


— , css-, import :

 @import url("/style.css") all and (color);


— media :

 @media all and (color) { /* css- */ }


, 13 , : , , , , , , , , . , , , min — max — .

9. web-


(viewport):

 <meta name="viewport" content="width=device-width, initial-scale=1.0">


, .

= — (width=device-width), , ( ).

1.0, , .

:

, , , , .

, , css , - , , .

media-, . , . , , , «width: 100%». , . .

:

, 12 , 100%, .

, HTML- box-sizing border-box. , padding border .

CSS:
 * { box-sizing: border-box; }


:

, width — 100%. , max- (width) 100%, (), , .

.

background-size «contain», , . .

background-size «100% 100%», , .

background-size «cover», , . «cover» , .

, . , - .

- min-device-width, min-width, , . :

 /*   ,  400px: */ body { background-image: url('img_smallflower.jpg'); } /*   400px  : */ @media only screen and (min-device-width: 400px) { body { background-image: url('img_flowers.jpg'); } }


HTML5 ,
( IE, Edge 13+).

, img. , , , , , :

 <picture> <source srcset="img_smallflower.jpg" media="(max-width: 400px)"> <source srcset="img_flowers.jpg"> <img src="img_flowers.jpg" alt="Flowers"> </picture>


srcset . media -, . img- , picture ( ).

:

width 100%, . , . max-width , width.

 video { max-width: 100%; height: auto; }


To read :

w3schools — Responsive Web Design
9 basic principles of responsive web design

10. CSS3


CSS .

— transition-property: , ( , )
— transition-duration: (0.3 )
— transition-timing-function: (ease, )

transition-timing-function — , : ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier ( ).

Sets the transition effect between two states of an element; they can be defined using the pseudo-element: hover or: active. Instead of adding transitions for each of the states of an element, you only need to declare a transition instruction once, when it is in the normal state.

 a.foo { padding: 5px 10px; background: #9c3; /*   */ -webkit-transition: background .3s ease, color 0.2s linear; -moz-transition: background .3s ease, color 0.2s linear; -o-transition: background .3s ease, color 0.2s linear; /*     ,     ,    */ transition: background .3s ease, color 0.2s linear; } a.foo:hover, a.foo:focus { color: #030; background: #690; }


Suppose that along with changing the background color, we also want to change the text color at the same time. We can do this by combining several transitions together, specifying them, separated by commas. Each transition can have its time and speed. During the event there will be a transition of all existing properties that we initialized.

Another major use of changing states is to change the background of the input field during its focus.

 input.ourInputBox:focus{ -webkit-transition:background-color 0.5s linear; background:#CCC; }


, , CSS. , .

To read :

Understanding CSS3 Transitions
CSS Fundamentals: CSS3 Transitions
CSS animated properties

11. CSS3


CSS , , , , CSS .

— keyframes: .
— animation properties: , () .

(keyframes):

— . , . ( @keyframes) :

— : , , , bounceIn
— : , 0% , 100% — . .
— css :

Let's look at a simple implementation of @keyframes, which we will call “bounceIn”. This @keyframes consists of three stages. At the first stage (0%), this element has an opacity set to zero and a smooth scale transition set to 10% of the original base scale. At the second stage (60%), our element appears (set opacity to one) and increases to 120% of its default size. At the final stage (100%), it returns to its original size.

@keyframes is added to your main CSS file.

 @keyframes bounceIn { 0% { transform: scale(0.1); opacity: 0; } 60% { transform: scale(1.2); opacity: 1; } 100% { transform: scale(1); } }


Animation properties (animation properties):

, , .

:
— @keyframes ,
— ,

CSS- ( ), , , :
— animation-name: , @keyframes
— animation-duration: (, 0.5s) (, 200ms).

bounceIn, animation-name animation-duration, , div-, .

 div { animation-duration: 2s; animation-name: bounceIn; }


:

 div { animation: bounceIn 2s; }


@keyframes ( ) animation properties ( ), .

animation-duration animation-name, , :
— animation-timing-function:
— animation-delay:
— animation-iteration-count: ,
— animation-direction: ,
— animation-fill-mode: , . ,
— animation-play-state: ,

:
animation: [animation-name] [animation-duration] [animation-timing-function] [animation-delay] [animation-iteration-count] [animation-direction] [animation-fill-mode] [animation-play-state];

, . Here is an example:

 .div { animation: slideIn 2s, rotate 1.75s; }


To read :

An Introduction to CSS Transitions & Animations
CSS Animation for Beginners
Simple CSS3 Transitions, Transforms, & Animations Compilation
Learn to Code Advanced HTML & CSS

12. (SVG)


SVG — . XML, . , SVG — , . , . , PNG JPEG, , SVG , , .

".svg" , , html-, , "<img src='say_hello.svg'>". . SVG , XML. , — , , , JavaScript CSS. , SVG . .

, , SVG PNG JPEG, , , .

SVG:
 <svg width="100" height="100"> <circle cx="50" cy="50" r="40" fill="red" /> </svg>


:

(, = 0). SVG .
SVG- :
— : x
— Y: y
— fill:
— fill-opacity:
— stroke:
— stroke-width:

:

— : . Retina , .
— . SVG, SVG- , , .
— . CSS, , , . , .
— SVG- (IE, Chrome, Opera, FireFox, Safari).
— http-, img
— SEO-: , , .
— JavaScript .

:

— , .
— (svg-), , .

: IE9+

To read :

Introduction to SVG
An introduction to SVG
The Simple Intro to SVG Animation
Icon fonts vs SVG — which is the best option?

Video :

Using SVG — Intro
SVG Tutorials — Playlist
Working with SVG, A Primer — Sara Soueidan
You Don't Know SVG — Dmitry Baranovskiy
SVG is for Everybody — Chris Coyier
Building Better Interfaces With SVG — Sara Soueidan
SVG Lessons I Learned The Hard Way — Sara Soueidan

13. CSS


CSS — , , - (sprite sheet) (tile set). , -.

, http-. , http- . , , , , CSS JavaScript .

CSS :

, css , .

 .flags-canada, .flags-mexico, .flags-usa { background-image: url('../images/flags.png'); background-repeat: no-repeat; } .flags-canada { height: 128px; background-position: -5px -5px; } .flags-usa { height: 135px; background-position: -5px -143px; } .flags-mexico { height: 147px; background-position: -5px -288px; }


:

CSS , , , , .

— , , .
— , .

To read :

CSS Sprites: What They Are, Why They're Cool, and How To Use Them
What are CSS Sprites
w3schools — Image Sprites

14.


— , , css . , , CSS? , ? ?!

(vertical-align): (inline) (table-cell), .

, , , , - :
— ?
— ?
- Do you always know the height of the content?
- can you use CSS3?

Line spacing method (line-height):

This method can be used when you are trying to vertically align single-line text, a line element, or an image.

Suppose you have the following HTML:

  <div class="parent"> <span class="child">Hello!</span> </div>


You need to align the .child element vertically:
  .parent { height: 150px; } .child { line-height: 150px; }


But if the content of the .child element is directly inside the parent .parent element:

  <div class="parent"> Hello! </div>


In this case, you can set the line spacing this way:
  .parent { height: 150px; line-height: 150px; }


If instead of a span-element you have an img-element:
  <div class="parent"> <img src="image.jpg" class="child-image"/> </div>


Then you need to change this way:
  .parent { height: 150px; line-height: 150px; } .child-image { vertical-align: middle; /*  ,     :) */ }


Table css method (css table):

This method is to mimic the table using CSS. Suppose you have the appropriate HTML code:

 <div class="parent"> <div class="child"> Hello, CSS table method! </div> </div>


.child :

  .parent { display: table; } .child { display: table-cell; vertical-align: middle; /* ,    ! */ }


, , . , IE.

(absolute position):

:

1 — ,
2 — ( , CSS3)

, HTML:

  <div class="parent"> <div class="child"> Hello, absolute position method! </div> </div>


, .child :

  .parent { position: relative; height: 300px; /* ,       "" */ } .child { position: absolute; top: 50%; height: 50px; margin-top: -25px; /*     */ }


:

 .parent { position: relative; height: 300px; /* ,       "" */ } .child { position: absolute; top: 50%; transform: translateY(-50%); /*        */ }


, , , flexbox, padding, stretching .

To read :

Centering in CSS: A Complete Guide
6 For Vertical Centering Methods With CSS
Vertical align with just anything of CSS 3 lines
How to center in CSS

15. Known issues


Additional external padding in line-block elements :

Let's assume that you need to create a list, the elements of which should go one after the other horizontally, without the interval between them.

The code could be something like this:

 <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> 


 li { display: inline-block; background: red; }


, . , , , . , , (margin: 0) , , - .

, - , , HTML, .

, .

HTML :


, , .

 <ul> <li>Item 1</li><li>Item 2</li><li>Item 3</li> </ul>


HTML :


 <ul> <li>Item content</li><!-- --><li>Item content</li><!-- --><li>Item content</li> </ul>


, , .

:

(font-size: 0), , , , .

  ul { font-size: 0; } li { display: inline-block; background: red; font-size: 14px; }


- :

, (margin) - (inline-block) 4px, , 4px .

 li { display: inline-block; margin: 0 -4px; }


To read :

Fighting the Space Between Inline Block Elements
Remove Whitespace Between Inline-Block Elements
CSS display inline-block Extra Margin/Space

:

5 Steps to Drastically Improve Your CSS Knowledge in 24 Hours
CSS3 Mastery
Getting to Work with CSS3 Power Tools
CSS pro tips

Source: https://habr.com/ru/post/273471/

More articles:


All Articles