CSS 개념--당신이 필요로 하는 유일한 지침

The CSS selector priority is classified in to few different categories, each carries a different weightage. We can calculate the actual priority by summing up all the selectors' weightage.

• In fact, if you use the !important rule, it will override ALL previous styling rules for that specific property on that element!

p {
  background-color: red !important;
}

• If two styles applied have the same priority, the latter one will be selected.

1. non-inheritable properties

• Display

• Text attributes : vertical-align、text-decoration、 text-shadow、 white-space、 unicode-bidi

• Box model attributes: width、height、margin、border、padding

• Background attributes: background、background-color、background-image、background-repeat、background-position、background-attachment

• Position attributes: float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index

• Generated content attributes: content、counter-reset、counter-increment

• **Outline style attributes: **outline-style、outline-width、outline-color、outline

• Page style attributes：size、page-break-before、page-break-after

• Audio style attributes：pause-before、pause-after、pause、cue-before、cue-after、cue、play-during

2. inheritable properties

• font attributes: font-family、font-weight、font-size、font-style

• text attributes: text-indent、text-align、line-height、
  word-spacing、letter-spacing、text-transform、color.

• Visibility

• List Layout attributes: list-style

• cursor

• block: block starts on a NEW line and takes up the full width available. So that means block elements will occupy the entire width of its parent element.

• inline: displays the element inline or on the same line. In other words, inline elements do NOT start on a new line and only takes up as much width as its content.

• inline-block: It’s essentially the same thing as inline, except that you can set height and width values.

• display: none: such element will not be rendered, thus it will not take up any space in the page, and the event binded to such element will not be triggered.

• visibility: hidden： the element will still hold in the page and it will respond to the events.

• opacity: 0： set the transparency of the element to 0, behaves the same as visibility: hidden

• position: absolute: use absolute position to move the element outside of the viewport.

• z-index:negative value: use other elements to fully cover it.

• transform: scale(0,0)： scale the size of the element to 0,0 such element will still exist in the page, however it will not listen to the events binded.

These are both used to reference external CSS files.

• link is an html tag which can load more than just css files. @import on the other hand can only load css.

• link can load the css at the same time as the webpage is loading, @import can only load css after the webpage has been completed loaded.

• Javascript can mutate the link attributes by accessing the DOM, @import does not support such way.

• transitions: For a transition to take place, an element must have a change in state, and different styles must be identified for each state. The easiest way for determining styles for different states is by using the :hover, :focus, :active, and :target pseudo-classes .

• animations: when more control is required, transitions need to have multiple states. In return, this is why we need animation. It does not need to be triggered by any events and the animation can be looped. We can set multiple key frame points by using

Pseudo-classes act as simple selectors in a sequence of selectors and thereby classify elements on non-presentational characteristics, pseudo-elements create new virtual elements.

There used to be just one way to do a timed loop in JavaScript: setInterval(). If you needed to repeat something pretty fast (but not as-fast-as-absolutely-possible like a for loop), you’d use that. For the purposes of animation, the goal is sixty “frames” per second to appear smooth, so you’d run a loop like this:

setInterval(function() {
  // animiate something
}, 1000/60);

• content-box: The width & height of the element only include the content. In other words, the border, padding and margin aren’t part of the width or height. This is the default value.

• border-box: The padding and border are included in the width and height.

Translate is a method in transform property. Changing the transform or opacity will not trigger the browser to reflow and repaint, it will only trigger compositions.

However, changing the absolute positioning will trigger a re-layout, which will trigger re-paint and composititon. The transform ask the browser to create a GPU layer for the element, but changing the absolute positioning will use the CPU. Therefore translate() is more efficient and can shorten the drawing time of smooth animation. When translate changes its position, the element still occupies its original space, and this will not happen with absolute positioning.

CSS Sprites are a means of combining multiple images into a single image file for use on a website, to help with performance.

We can use background-image,background-repeat,background-position
to located the image.

Pros:

• It can minimize the http request that client side has to make for retrieving image resources from the server.

• Combining multiple image into one will also reduce the image size

Cons:

• Require precise measurements on each image's size.

• When some part of the image has changed, we have to edit the combined image.

• Loading performance:

1. compress CSS file to reduce file size

2. use single css property instead of shorthand property

3. do not use @import, use link instead

• Selectors:

1. Use key selectors instead of Descendant combinator as the latter will iterate through all its descendants on the tree.

2. When using ID selector, don't add unnecessary selectors

3. do not use * selector

4. use class selector instead of HTML tag selector

5. avoid repeatly assigning styles to elements, make use of the inheritable properties.

• Rendering performance:

1. use float and position carefully as they consume a lot of resources.

2. avoid frequent rerendering

3. use CSS spirte efficiently

• css preprocessor: less, sass, stylus

• postprocessor: postCss

Reason for use:

• To make a clear CSS structure, easy to expand.

• It can easily prevent different browers' syntax difference.

• Multiple inheritance can be easily achieved.

• Perfectly compatible with CSS code and can be applied to old projects.

• window.innerHeight is the viewport height

• document.body.scrollTop || document.documentElement.scrollTop is the distance that brower has scrolled.

• imgs.offsetTop is the distance of the element's top to the top of the document

If img.offsetTop < window.innerHeight + document.body.scrollTop` || document.documentElement.scrollTop that means the img has already shown up in the viewport.

Media queries in CSS3 extended the CSS2 media types idea: Instead of looking for a type of device, they look at the capability of the device.

Media queries can be used to check many things, such as:

width and height of the viewport
width and height of the device
orientation (is the tablet/phone in landscape or portrait mode?)
resolution
Using media queries are a popular technique for delivering a tailored style sheet to desktops, laptops, tablets, and mobile phones (such as iPhone and Android phones).

The z-index property only works on elements with a position value other than static (e.g. position: absolute;, position: relative;, or position: fixed).

It will not be functioning properly if :

• Parent container's position is relative

• the element with z-index has also been set with float

Two column layout usually refers to a layout which has a fix width left column and auto fill right column

1.Float left element to the left, set the width to 200px, set the margin-left of the right element to the width of left element.

.outer {
height: 100px;
}
.left {
float: left;
width: 200px;
background: tomato;
}
.right {
margin-left: 200px;
width: auto;
background: gold;
}

2.make use of the absolute position, before that we have to set the position property of the parent container to anything other than static. Then set the left element's position to absolute with 200px width. Follow by right element's margin-left to 200px.

.outer {
position: relative;
height: 100px;
}
.left {
position: absolute;
width: 200px;
height: 100px;
background: tomato;
}
.right {
margin-left: 200px;
background: gold;
}

3.Use the flex layout, set left element width to 200px, set right element flex property to 1

.outer {
display: flex;
height: 100px;
}
.left {
width: 200px;
background: tomato;
}
.right {
flex: 1;
background: gold;
}

Three column layout refers to having the left and right element with fixed width, middle element will auto fill the gap.

1.Use absolute position, set left element to a certain width. Set right element's top and right attribute to 0 so it will stick to the right side of the container. Lastly set the margin-left and margin-right of the centered element to the respective width of left and right element.

`.outer {
position: relative;
height: 100px;
}

.left {
position: absolute;
width: 100px;
height: 100px;
background: tomato;
}

.right {
position: absolute;
top: 0;
right: 0;
width: 200px;
height: 100px;
background: gold;
}

.center {
margin-left: 100px;
margin-right: 200px;
height: 100px;
background: lightgreen;
}`

2.Use flex layout, set left and right element with a fixed width, let centered element's flex: 1

`.outer {
display: flex;
height: 100px;
}

.left {
width: 100px;
background: tomato;
}

.right {
width: 100px;
background: gold;
}

.center {
flex: 1;
background: lightgreen;
}`

• use the absolute position, set left and top to 50% so that the left corner of the element will appear in the center of the element. Use translate to adjust the center point of the child element to match the parent's.

.parent{position: relative;}
.child {position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}

• Use flex layout, set align-items:center and justify-content:center

.parent {
display: flex;
justify-content:center;
align-items:center;
}

Responsive Web design is a website that can be compatible with multiple terminals, instead of making a specific version for each terminal.

The basic principle is to use media query (@media) query to detect different device screen sizes for processing.

About compatibility: The page header must have the viewport declared by meta.

<meta name="’viewport’" content="”width=device-width," initial-scale="1." maximum-scale="1,user-scalable=no”"/>