CSS writing method for webkit kernel browser_html/css

CSS writing method for webkit kernel browser_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:49:28

Original

1374 people have browsed it

-webkit-tap-highlight-color: transparent; Set the color to transparent when clicking on a link to highlight on Mobile

-webkit-user-select: none; Set to impossible Select text

-webkit-touch-callout: none; The system menu will not be triggered when long-pressed. You can add this attribute to the image to prohibit downloading the image

:-webkit-full-screen canvas { } Style in full screen mode (for Desktop)

div p :matches(em, b, strong) {} Use mathes to match multiple selectors

@media only screen and (max -width: 480px) {} Specify Mobile device or small desktop screen

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 300dpi) { Specify high resolution Screen device

header { background-image: url(header-highres.png); }

}

@media (-webkit-max-device-pixel-ratio : 1.5), (max-resolution: 299dpi) { Specify low-resolution screen device

header { background-image: url(header-lowres.png); }

}

background-repeat: space; background-repeat: round; These two CSS3 background properties are worth studying

width: calc(100%-40px); Calculate width

text- decoration: #FF8800 wavy ine-through; wavy link

text-rendering: optimizeLegibility; using this attribute will tighten the distance between characters

font-variant-ligatures: common-ligatures ; Set CSS ligatures

transform: rotate(90); Rotate 90 degrees

transform-origin: center center; transform-origin can change the position of the transformation

-webkit -appearance: none; -webkit-appearance can change buttons or other controls to look like local controls

Beautify the prompt style during form verification

::-webkit-validation-bubble { }

::-webkit-validation-bubble-message {}

::-webkit-validation-bubble-arrow {}

::-webkit-validation- bubble-arrow-clipper {} When the prompt appears similar to the following structure

Error Message< ;/div>

Customize the scroll bar of the webkit browser, see the effect of Google Reader, etc. under Chrome/Safari. The following is an example. The style code of this scroll bar is as follows:

Customized WebKit Scrollbar /* Let´s get this party started */

::-webkit-scrollbar {

width: 12px;

}

/* Track */

::-webkit-scrollbar-track {

-webkit-box-shadow: inset 0 0 6px rgba(0,0,0, 0.3);

-webkit-border-radius: 10px;

border-radius: 10px;

}

/* Handle */

::-webkit-scrollbar-thumb {