CSS used in their own projects

CSS some properties are easy to forget, half a day not to write to check the API, sometimes THE API is not good, so or write down the future easy to use, the follow-up will slowly add in.

Github: github.com/aototo/blog blog long-term updates, like friends star

outlineA status line appears when removing a selected input element

An outline is a line that is drawn around elements (outside the borders) to make the element "stand out". A line wrapped around elements, normally set to None. div { outline: none; // Outline: 5px; You can also set styles}Copy the code

contenteditableSets whether element is editable

<p contenteditable="true"> Editable </p>Copy the code

You can use the input and blur events to listen for the input of element and mouse away after the input.

---

webkit-playsinline

Mobile video can now be played on a page instead of full screen.

<video src="test.mp4" webkit-playsinline="true"></video>
Copy the code

Position: Absolute, make margin valid

Left :0, right:0 margin: 0 auto; You can. The reason for this is that both sides are zeros and there is no margin, so the element calculates the distance and centers it. div { position: absolute; left: 0; right: 0; margin: 0 auto; }Copy the code

Use ClearFix to clear floats and resolve high parent class collapses.

.clearfix {
	zoom: 1;
}

.clearfix:after {
	 visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
 }
Copy the code

User-select Disables the user from selecting text

div {
    user-select: none; /* Standard syntax */
}
Copy the code

A highlight that appears when Element is removed from the phone tap event

* {- its - tap - highlight - color: rgba (0,0,0,0); }Copy the code

::-webkit-scrollbar-thumb

You can modify the browser scroll bar style. IE Firefox may not support it.Copy the code

---

-webkit-appearance:none

1. To apply platform specific styling to an element that doesn’t have it by default
2. To remove platform specific styling to an element that does have it by default

Remove the browser’s default style, such as Chrome’s input default, and then define the desired style.

input, button, textarea, select {
	*font-size: 100%;
	-webkit-appearance:none;
}
Copy the code

Hardware acceleration is enabled for the CSS

www.cnblogs.com/rubylouvre/…

-webkit-transform: translateZ(0);
Copy the code

Page flickering bugs can occur when using CSS Transforms or animations

-webkit-backface-visibility: hidden;
Copy the code

-webkit-touch-callout disables long pressing links and images to pop up menus

-webkit-touch-callout: none;
Copy the code

Transform-style: Preserve-3D enables the element to support 3D

div {
    transform: rotateY(60deg);
    transform-style: preserve-3d;
}
Copy the code

The perspective of perspective

The presence of this attribute determines whether the element you see is 2D or 3D. Typically set on the parent class of the enclosing element.

.div-box {
	perspective: 400px; 
}
Copy the code

The CSS implements non-newline, automatic newline, and forced newline

// white-space:nowrap; Word-wrap: break-word; word-break: normal; Word-break :break-all;Copy the code

Box-sizing makes the width and height of the element include the border and padding

{
	box-sizing: border-box;
}
Copy the code

Calc () function computes the attribute value

www.w3schools.com/cssref/func…

div {
    width: calc(100% - 100px);
}
Copy the code

The example above is to subtract 100px from the width of 100%. This works well in projects above IE9

---

Css3 Linear-gradient linear gradient

Start at top by default, you can also customize the direction.

div { linear-gradient(red, yellow) } background: linear-gradient(direction, color-stop1, color-stop2, ...) ;Copy the code

Common Selector :nth-child() Selector

Select the first child node under the superclass, the p element

p:nth-child(1) {
    ...
}
Copy the code

– Webkit-font-Smoothing anti-aliasing

Using this property makes the font on the page clear, but it also causes font-weight: bold to be abnormal. Try…

div {
    -webkit-font-smoothing: antialiased; 
}
Copy the code

---

CSS3 Filter Property Image filtering

img { filter: grayscale(100%); // gray filter: blur(5px); / / fuzzy filter: brightness (200%); / / highlighting filter: saturate (8); / / saturated filter: sepia (100%); / / nostalgic... }Copy the code

Mobile terminal can be used, IE compatibility is not good. More see www.w3schools.com/cssref/css3…

Create triangles using CSS

This is a lot of interview questions, but I actually use it.

div {
    border-bottom: 10px solid white;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    height: 0px; 
    width: 0px; 
}
Copy the code

Transparent transparent

The Clip property captures the image you want to display

img {
    position: absolute;
    clip: rect(0px,60px,200px,0px);
}
Copy the code

If you are interested, you can see tympanus.net/codrops/201…

Set spacing between text and letters. This is useful for spacing between letters

h1 { letter-spacing: *px; // Can also be negative}Copy the code

---

In terms of display: Box and Display: Flex, the former was implemented in 2009 and the latter in 2012. If you have an older Android, please use Display: Box, but the performance of the two may be a little different. Here are the compatibility methods.

display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
display: -moz-box; /* Firefox 17- */
display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
display: -moz-flex; /* Firefox 18+ */
display: -ms-flexbox; /* IE 10 */
display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
Copy the code

---

Picture blur problem in motion

During the animation process, the picture will be blurred, which can be set on the picture as follows.

transform: translate3d(0, 0, 0);
Copy the code

The use of margin aotu

div { width: 100px; position: absolute; right: 0; } // use margin-left: auto to make the right div {width: 100px; margin-left: auto; }Copy the code

---

Overflow scroll: overflow scroll on ios

-webkit-overflow-scrolling: touch;
Copy the code

Subsequent additions… Please correct any mistakes, thank you.

Here are some CSS sites that are often used in projects.

Css3 animation manual Css Reference manual Anicollection Animate library CSShake font icon w3schools