CSS3 Tips

CSS3_Tips.md

Flex box display

element with flex/inline-flex affects its child nodes!

Vertical or horizontal layout child nodes

{display:flex; flex-direction:row;} /*horizontal*/
{display:flex; flex-direction:column;} /*vertical*/

Change sequence to right > left

{display:flex; flex-direction:row-reverse}

Change sequence to bottom > top

{display:flex; flex-direction:column-reverse}

Horizontal justify

• justify-content : flex-start
  align = left
• justify-content : flex-end
  align = right
• justify-content : center
  align = center
• justify-content : space-between
  justified, use as much place as it can take
  item.center = center of (width-2*w)/(n-2)
• justify-content : space-around
  justified, item.center = center of width/n

Vertical align

• align-items: stretch; //item.height = container.height
• align-items: flex-start; //item.height = auto, vertical-align=top
• align-items: flex-end; //item.height = auto, vertical-align=bottom
• align-items: center; //item.height = auto, vertical-align=middle
• align-items: baseline; //item.height = auto, vertical-align=text-baseline, display==inline-flex Only?;

Horizontal wrap , nowrap

• flex-wrap: nowrap; //like table>tr>td*N, width will be narrow than usual
• flex-wrap: wrap; //like float:left
• flex-wrap: wrap-reverse; //float + reversed seq

Vertical justify

flex-wrap == wrap Only!!, on the contrary of justify-content

• align-content : stretch
• align-content : flex-start
• align-content : flex-end
• align-content : center
• align-content : space-between
• align-content : space-around

Order

• order : -1; //works good with display:flex

Some item align left, while others align to right

• margin :

.item{margin:10px;}
.item:first-child{margin-right:auto;} /*1st item goes left, while others align to right*/

Perfect horizontal & vertical center

• margin : auto

Override parent container's layout

• align-items : stretch override parent.align-items
• align-items : flex-start override parent.align-items
• align-items : flex-end override parent.align-items
• align-items : center override parent.align-items
• align-items : baseline override parent.align-items

Ratio of each item

• flex : 1, 1 means 100% of other items.width

Change direction sequence

.container{direction: rtl;}
.container > *{}

TAB key order | nav-up|down|left|right

https://www.w3schools.com/cssref/css3_pr_nav-index.asp

CSS background offset

background-position: right 5px bottom 5px; 

CSS Section Counter

counter-increment counter-reset http://www.w3schools.com/cssref/tryit.asp?filename=trycss_gen_counter-reset

Form elements:

1 : input.required

<input required>

input:optional{}
input:required{}/* this item is required */
input:empty{} /*no value is set*/

3 : Multi-lang selector

<p lang='en' class='required'></p>

p.required:lang(en):before{content:'Required'}
 p.required:lang(jp):before{content:'必須'}

4 : Auto validate : Number

<input type="number" min="5" max="10" value="7">

input:in-range{outline : 1px solid green}
input:out-of-range{outline : 1px solid red}

5 : Validation

<input type="color"/>
<input type="date"/>
<input type="datetime-local"/>
<input type="email"/>
<input type="month"/>
<input type="number"/>
<input type="range"/>
<input type="search"/>
<input type="tel"/>
<input type="time"/>
<input type="url"/>
<input type="week"/>

Advanced validation

<input type="text" maxlength=120/>
<input type="text" pattern="[A-Za-z]{3}"/>

input:valid{}
input:invalid{}

7 : Reset

<input type="reset">

General Sibling Selector : ~

div ~ p {} /* all <p> tag after <div>, <p>&<div> are siblings of the same parent. */

Pseudo-elements : content

• Example 1:

<div data-key='my key'>...

div:before{content:attr('data-key');}

• Example 2:

<li name="my name"></li>

li:hover:after{content:attr(name);}

Media queries

@media screen and (max-width: 300px) {
  body {
      background-color: lightblue;
  }
}

OR

<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">

Multi backgrounds

#example1 {
  width: 500px;
  height: 250px;
  background-image: url(sheep.png), url(betweengrassandsky.png);
  background-position: center bottom, left top;
  background-repeat: no-repeat;
}

Viewport units: vw, vh, vmin, vmax

div{width:100vmin; height:100vmax;} /* 1vmin=min(1vh,1vw) */

Device Orientation

@media only screen and (orientation: landscape) {
  body {
      background-color: lightblue;
  }
}

Selection

p::selection {
    color: red; 
    background: yellow;
}