CSS writing method for webkit kernel browser_html/css_WEB-ITnose

-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