Tricks

# CSS3 tricks

## Useful links:
  [Can I use](https://caniuse.com)  
  [Box model](https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model)  
  [Width & height](https://www.w3schools.com/css/css_dimension.asp)  
  [Display](https://developer.mozilla.org/en-US/docs/Web/CSS/display)  
  [Pseudo element](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements)  
  [CSS Specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity)  
  [Positioning](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning)
  [Position](https://developer.mozilla.org/en-US/docs/Web/CSS/position)  
  [Stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context)  
  [Font size](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size)  
  [My device info](https://www.mydevice.io/)  
  [Absolute length](https://www.w3.org/TR/css-values-3/#absolute-lengths)  
  [min device pixel ratio](https://bjango.com/articles/min-device-pixel-ratio/)  
  [Media Queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries)  
  [Using media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries)  
  
## Tricks

#### Default css  
    *, *::before, *::after { box-sizing: inherit };
    html { font-size: 62.5%;} /* browser font-size=16px 10/16=.626 =>62% of 16px = 10px*/
    body {  margin:0;
            box-sizing: border-box;
    }
    ul { margin: 0, list-style: none }
    // default css 
#### Definitions
    // viewport : the viewport is simply the visible part/area of your web page.
    // the browser window.
#### Specificity  
    #myId { border: 1px solid red }
    .myclass { border: 1px solid blue }
    // CSS is applying the rules based on CSS specifity, ex: ids have higher priority over
    // class wherever the declaration is placed in the css file.
    
    <link rel='stylesheet' href='shared.css'>
    <link rel='stylesheet' href='main.css'>
    // if both css file target same css element the lastest one will apply
#### Function
    calc(100% - 45px)
    // allow to deduct dynamically some length
#### Inherit value property
    font:inherit
    // Inherit will force to get the defined font from the body instead 
    // of getting a font applied by the browser.
#### Outline property
    button:focus{ outline: none }
    // In order to simulate how it looks like for pseudo class
    // select the button and click .hov tab
#### Display property
    // inline : we can't change the height and width
    // inline-block: width : yes height: no;
    // block: width: yes height: yes
#### Position property
    .bar { position: fixed }
    // position fixed define the position of the element from the viewport,
    // not from any parent or any element ancestor.
    // top :0px means the element will be at 0px from the top of the window.
    // same behaviour as position absolute.

    // position relative : the element with position relative is not taken out from
    //  current flow and this element can be moved with top,right,left & bottom from
    // its initial position.

    // position: sticky; this property is a mixed between fixed and relative. the element context
    // is the viewport once we scroll down and the bottom border of its nearest parent when
    // this element reach the end of it when scrolling down.
#### Overflow property
    // if the element is taken out of its parent container with this element having
    // position relative with left 100px and its parents is only 50px by applying
    // overflow hidden to the parent container it will prevent to show any child element
    // pushed out of its parent.
    // if we need to apply an overflow hidden to the body apply this property to both html &
    // body element

#### Z-index property & Stacking context
    // if we have 3 elements with a fixed position with all having default z-index=0
    // the html element flow will decide which one will be on top of each one.
    // z-index work only on its stacking context. Stacking context means all children
    // will have a z-index based on its parent context. Every parent element has its own
    // stacking context!
    
#### Background image
    // background-position: left top; That means if the image exceed the hight of its
    // parent container the image will be cropped at the right and bottom.
    // background-position: left 10% botom 10% ; that means the image will be crop from the 
#### Multiple backgroud with linear-gradient
    background: linear-gradient(to top, rgba(80,68,18, 0,6) 10%, transparent),
    url("images/green.jpg") left 10% bottom 20%/cover no-repeat border-box, #ff1b68;
#### Meta viewport
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes,
    maximum-scale=2.0, minimum-scale=1"></meta>
    // content convert the hardware pixel to CSS pixel with ratio check mydevice.io
    // initial-scale define the level of zoom
    // user-scalable define if the user is allowed to zoom in/out.
    // maximum & minimum-scale define how the user is allowed to zoom in/out.
    
#### Advanced Attribute Selectors
    [type] { color: red} // element with attribute
    <input type="text">
    
    [type='email'] {color: red} // element with specific attribute value 
    <input type='email'>
        
    [lang~='en-us'] {color: red} // element with specific value in list
    <p lang"en-us en-gb> 

    [lang|="en"] {color: red} // element with specific attribute value/value-
    <p lang="en-us>Hi!</p>
    
    [href^="#"] {color: red} // element with specific value prefix
    <a href="#all">home</a>
    
    [href$=".de"] {color: red} // element with specific attribute value suffix
    <a href="#ab.de">german</a>
    
    [href*="cdn"] {color: red} // element with at least one attribute value
    <a href="i.cdn.com">home</a>
    
    [href*="cdn"i] {color: red} // Check values Case-insensitively
    <a href="i.cdn.com">home</a>
    
    .signup-form input:not([type="checkbox"])
    // select all input with class signup-form which aren't type=checkbox
    
#### Text decoration
    text-decoration: underline
    text-decoration: overline
    text-decoration: underline line-through blue;
    text-decoration: underline wavy red;
    
#### text shadow
    text-shadow: 2px 2px 5px red; // offset-x offset-y blur color

#### font property
!font-size & font-family are mandatory to use font eg: font: 1rem "Roboto", sans-serif
    font: italic 700 1.2rem/2 "Roboto", sans-serif;
    font: font-style font-variant font-weight font-size/line-height font-family;

#### font display
    properties available : swap block fallback optional auto
    
#### Flex
    display: flex|inline-flex // container
All children elements inside the container are flex items !

    flex-direction : row|row-reverse|column;
    flex-wrap: no-wrap|wrap|wrap-reverse;
    
    //shorthand for flex-direction & flex wrap
    flex-flow: row wrap;
    
    //align-items always refer to the cross axis
    //justify-content always refer to the main axis