Introduction to the CSS

Here’s a quick set of questions and answers:

What is CSS?

Cascading Style Sheets. As its name suggests, it can style HTML documents with cascading features.

What does cascade mean?

Cascading styles, selectors, and files make CSS writing very flexible

Who invented CSS?

CSS was first proposed by Sir Lee’s Norwegian colleague Mr Lie

Which version of CSS is the most mainstream or popular?

CSS 1 and CSS 2 are the older versions. CSS 2.1 is the most widely used and most compatible version. CSS 3 is being upgraded by modules and is gradually expanding the compatibility of browsers.

Version details of the CSS

CSS version time The importance of
CSS 1 In 1996, Out of date
CSS 2 In 1998, Out of date
CSS 2.1 In 2004 ~ 2011 Most widely used version (IE support)
CSS 3 It was drafted in 1999 Modern version, modular upgrade (IE 8 partially supported)
CSS 4 ? A future version Upgrade by Module

View the CSS features of the browser

The compatibility of various browsers is very complicated. It is recommended to use Caniuse.com to collect all the data on the whole network

The CSS syntax

Master two categories

Style syntax

Selector {property name: property value; }Copy the code

Be case sensitive!!

@ syntax

@charset "UTF-8";
@import url(.css);
@media (min-width: 100px) and (max-width: 150px)
Copy the code

Matters needing attention

  • The charset character encoding setting must be on the first line
  • If there is no {}, it must be; At the end
  • Media media query is a very key function to do adaptive or self-responsive pages

CSS debugging methods

Similar to the classical LOG debugging method in JS, CSS also has its soul debugging method, border debugging method

In a pinch, add a border to the element

Note that border can sometimes affect size, causing problems with the space in which the parent element fits its children.

Tips: In this case, use outline instead of border. Outline does not take up space in the document

Important Concepts of CSS

Normal Flow

Domestic translation document flow, in fact, literal translation should be normal flow or regular flow, is a normal layout of HTML documents flow direction.

The top left corner of the page is the starting point, the horizontal flow is left to right, and the vertical flow is top down.

Block, inline, inline-block elements

  • Block elements start from top to bottom, one line at a time
  • An inline element goes from left to right, and a line break occurs at the end of the line
  • Inline-box elements are also left to right

The box model

There are two types of CSS box models: the default Content-box model and the border-box model. The main difference between context-box and context-box is that you specify only the content width, not the padding, not the border. In the border-box model, you define the width of the element as the sum of the content, padding, and border. If the padding, border, and content widths are defined, they are automatically subtracted.

The border-box model is very consistent with human thinking and is generally suitable for daily work scenarios, so it is recommended to use it first.

Out of the Normal Flow

Use the following CSS styles for elements:

  • float
  • Position: Absolute/Fixed, etc

CSS hole

Said CSS so many features and advantages, the actual work will find CSS also has disadvantages, there are a lot of wonderful pit.

The most classic, margin merge problem

On newer, mainstream browsers, such as Chrome and Firefox, CSS has vertical margin merges of block elements, also known as margin collapse. If the parent and the first and last child elements or the adjacent sibling child elements exist at the same time in the vertical margin, their margI will take the largest value among them.

On older browsers like IE8, the margin merge feature won’t work. And that’s what we call the double margin problem. Because most of our CSS programming is based on the most popular chrome kernel browser; In the IE kernel, applying vertical margin to adjacent child elements will result in a double effect instead of automatic merging. There are ways around it, but this is a typical CSS headache.

CSS3’s important new feature – animation

CSS3 provides strong animation functions, mainly divided into two methods: Transition and animation. Through these two kinds of animation functions, packaging and coordination, we can achieve some very cool and dazzling animation effect, get rid of the previous complex Js script implementation of the tedious operation. Before we move on to these two animation capabilities, we need to know a little bit about how browsers render HTML pages.

How browsers render

In terms of how browsers render, each browser has its own approach and subtle differences. Since the most popular browsers use the Chrome kernel, we’ll give chrome’s rendering a priority. The most authoritative explanation for Chrome rendering is the documentation provided by Google. The document is very long, very professional, and involves a lot of technical terms that are difficult to read, so HERE is a brief summary.

Browser rendering process

  1. Build an HTML tree, or DOM tree, from HTML
  2. Building a CSS Tree from CSS (CSSOM)
  3. Merge two trees into one render tree
  4. Layout (including document flow, box model, calculation size and location)
  5. Paint (to draw border colors, text colors, shadows, etc)
  6. Compose (display screen according to cascade relationship)

How to update styles

JS scripts are usually used to update styles

  • Like changing the backgrounddiv.style.background = 'color'
  • For example, change element show/hidediv.style.display = 'none'
  • Changing the style of an element is more commonly done by changing the class namediv.classList.add('blue')
  • Remove nodediv.remove()

These different scripts and methods will result in different page style updates, depending on the browser version. Involves the browser’s rendering process.

Three update modes

  1. JS -> style -> layout -> paint -> composite
  2. JS -> style -> paint -> composite
  3. JS -> style -> composite

The first way is to go all the way through, such as div.remote, which will make the element disappear and the rest of the elements rearranged relayout.

The second method skips the layout step because it doesn’t involve rearranging elements, such as changing the background color.

The third method skips the Layout and paint steps and goes straight to the Composite step. For example, a very important feature that changes the appearance of an element is transform.

To optimize the animation effect of CSS, it is necessary to study the browser rendering process and optimize the process triggered by different attributes. The simpler the triggered CSS update process is, the faster the response is, and the better the user experience is.

Note that different attributes trigger different rendering processes, which requires experimenting with different browser debugging features.

Fortunately, there is CSS Triggers, a website that has summarized most of the commonly used CSS attribute Triggers for performance in different browsers.

Transform Method Introduction

Four common functions:

  • The displacement of the translate
  • The zoom scale
  • Rotate the rotate
  • Tilt skew

Transform transforms the appearance of page elements.

In particular, inline elements do not support transform, so display: block;

The specific statements of these methods are described in detail in MDN. The quickest way to master the statements is to look at the syntax examples of MDN.

Example: Translate (-50%, -50%) is often used to absolutely center elements

Note that the scale statement is rarely used, as it can lead to element ambiguity, disastrous visuals, and poor user experience.

Transition Method introduction

What it does, essentially, is auto-complete the middle frame of the animation.

The syntax is simple:

Transition: attribute name duration Delay.

And some tips:

  • You can separate two different attribute names with commas
  • You can use all to represent all attributes
  • The transition mode is expressed by functions, and there is a lot of mathematical knowledge that is not convenient to expand. Ease, Linear, steps

And a few points to note:

  • Not all properties have animation transitions, such as display: None to block without transitions
  • The transition must have a beginning and an end. You can perform one animation or one backward and one backward

The classic use is the transition between hover and non-hover states

Animation method Introduction

In addition to having two nodes start and finish, if you want to achieve more complex animations, you can’t just use a simple transition. If you want to use transition method to achieve multiple intermediate turning points, then you need to use JS statements to cooperate with the implementation. This process can be tedious.

To create complex animation effects, add more intermediate frames and keyframes, it is best to use animation method.

The animation method is also very simple to use, with two steps:

  1. Declare keyframes
  2. Add animation

Animation abbreviation syntax:

Animation: | | transition way long delay | | | times direction whether filling | | suspended animation name;

  • The degree can be a specific number, or infinite
  • The directions are reverse/alternate/alternate-reverse
  • Fill modes none/forwards/backwards/both
  • Whether to pause the property to control the playback state PAUSED/RUNNING

Request keyframes @keyframes

@keyframes name {
  from {
  }
  to {
  }
}
Copy the code

or

@keyframes name {
  0, 100% {
  }
  50% {
  }
}
Copy the code

In my personal experience, the use of animation is more complicated than transition, and the code maintenance is more complicated. If you can use Transition to achieve basic animation effects, try to use Transition to achieve them.