WebKit (-webkit-) vendor-spezifische CSS-Erweiterungen
Ein Vendor-Prefix wird verwendet, um anzugeben, dass ein Feature spezifisch für einen bestimmten Browser ist. Benutzeragenten, die auf WebKit oder Blink basieren (wie Safari und Chrome), unterstützen mehrere Erweiterungen für CSS, die mit -webkit- vorangestellt sind.
-webkit-Properties ohne standardisierte Entsprechungen
Hinweis: Diese Eigenschaften funktionieren in Browsern, die auf WebKit oder Blink basieren, außer dort, wo Hinweise auf den Support etwas anderes angeben. Sie sollten vermeiden, diese auf Produktionswebsites zu verwenden.
A-C
-webkit-app-region: Nicht mehr in Safari unterstützt.-webkit-border-horizontal-spacing-webkit-border-vertical-spacing-webkit-box-reflect: Aus Kompatibilitätsgründen von jedem Browser mit-webkit-unterstützt.-webkit-column-axis: Nicht in Chrome unterstützt.-webkit-column-progression: Nicht in Chrome unterstützt.-webkit-cursor-visibility: Nicht in Chrome unterstützt.
D-L
-webkit-font-smoothing: Siehefont-smooth.-webkit-hyphenate-limit-after: Nicht in Chrome unterstützt.-webkit-hyphenate-limit-before: Nicht in Chrome unterstützt.-webkit-hyphenate-limit-lines: Nicht in Chrome unterstützt.-webkit-line-align: Nicht in Chrome unterstützt.-webkit-line-box-contain: Nicht in Chrome unterstützt.-webkit-line-grid: Nicht in Chrome unterstützt.-webkit-line-snap: Nicht in Chrome unterstützt.-webkit-locale-webkit-logical-height-webkit-logical-width
M
-webkit-mask-box-image: Siehemask-borderundborder-image.-webkit-mask-box-image-outset: Siehemask-borderundborder-image.-webkit-mask-box-image-repeat: Siehemask-borderundborder-image.-webkit-mask-box-image-slice: Siehemask-borderundborder-image.-webkit-mask-box-image-source: Siehemask-borderundborder-image.-webkit-mask-box-image-width: Siehemask-borderundborder-image.-webkit-mask-composite: Siehemask-borderundborder-image.-webkit-mask-position-x: Aus Kompatibilitätsgründen von jedem Browser mit-webkit-unterstützt.-webkit-mask-position-y: Aus Kompatibilitätsgründen von jedem Browser mit-webkit-unterstützt.-webkit-mask-repeat-x: Nicht mehr unterstützt; siehemask-repeat.-webkit-mask-repeat-y: Nicht mehr unterstützt; siehemask-repeat.-webkit-mask-source-type: Nicht in Chrome unterstützt.-webkit-max-logical-height-webkit-max-logical-width-webkit-min-logical-height-webkit-min-logical-width
N-Z
-webkit-nbsp-mode: Nicht in Chrome unterstützt.-webkit-perspective-origin-x-webkit-perspective-origin-y-webkit-rtl-ordering-webkit-tap-highlight-color: Nur in Safari auf iOS unterstützt.-webkit-text-decoration-skip: Nicht in Chrome unterstützt.-webkit-text-decorations-in-effect-webkit-text-fill-color-webkit-text-security-webkit-text-stroke-webkit-text-stroke-color-webkit-text-stroke-width-webkit-text-zoom: Nicht in Chrome unterstützt.-webkit-touch-callout: Nur in Safari auf iOS unterstützt.-webkit-transform-origin-x-webkit-transform-origin-y-webkit-transform-origin-z-webkit-user-drag-webkit-user-modify
-webkit-Properties mit standardisierten Entsprechungen
Mehrere -webkit--präfixierte Eigenschaften haben standardisierte Entsprechungen.
Auch wenn der Name und die Syntax unterschiedlich sein können, sollten sie nicht mehr verwendet werden.
Für jede der unten stehenden Eigenschaften verwenden Sie die standardisierten Entsprechungen.
A-B
-webkit-border-after: Verwenden Sieborder-block-end.-webkit-border-after-color: Verwenden Sieborder-block-end-color.-webkit-border-after-style: Verwenden Sieborder-block-end-style.-webkit-border-after-width: Verwenden Sieborder-block-end-width.-webkit-border-before: Verwenden Sieborder-block-start.-webkit-border-before-color: Verwenden Sieborder-block-start-color.-webkit-border-before-style: Verwenden Sieborder-block-start-style.-webkit-border-before-width: Verwenden Sieborder-block-start-width.-webkit-border-end: Verwenden Sieborder-inline-end.-webkit-border-end-color: Verwenden Sieborder-inline-end-color.-webkit-border-end-style: Verwenden Sieborder-inline-end-style.-webkit-border-end-width: Verwenden Sieborder-inline-end-width.-webkit-border-start: Verwenden Sieborder-inline-start.-webkit-border-start-color: Verwenden Sieborder-inline-start-color-webkit-border-start-style: Verwenden Sieborder-inline-start-style.-webkit-border-start-width: Verwenden Sieborder-inline-start-width.-webkit-box-align: Verwenden Sie CSS flexbox mitalign-items.-webkit-box-direction: Verwenden Sie CSS flexbox mitflex-direction.-webkit-box-flex-group: Verwenden Sie CSS flexbox mitflex-basis,flex-grow, undflex-shrink.-webkit-box-flex: Verwenden Sie CSS flexbox mitflex-grow.-webkit-box-lines: Verwenden Sie CSS flexbox mitflex-flow.-webkit-box-ordinal-group: Verwenden Sie CSS flexbox mitorder.-webkit-box-orient: Verwenden Sie CSS flexbox mitflex-direction.-webkit-box-pack: Verwenden Sie CSS flexbox mitjustify-content.-webkit-box-reflect: Verwenden Sie die CSSelement()Funktion.
C-I
-webkit-column-break-after: Verwenden Sie CSS Multi-Column Layout mitbreak-after.-webkit-column-break-before: Verwenden Sie CSS Multi-Column Layout mitbreak-before.-webkit-column-break-inside: Verwenden Sie CSS Multi-Column Layout mitbreak-inside.-webkit-font-feature-settings: Verwenden Siefont-feature-settings(die präfixierte Version wird nicht in Safari unterstützt).-webkit-hyphenate-character: Verwenden Siehyphenate-character.-webkit-initial-letter: Verwenden Sieinitial-letter.
J-Z
-webkit-line-clamp: Verwenden Sieline-clamp.-webkit-margin-after: Verwenden Siemargin-block-end.-webkit-margin-before: Verwenden Siemargin-block-start.-webkit-margin-end: Verwenden Siemargin-inline-end.-webkit-margin-start: Verwenden Siemargin-inline-start.-webkit-padding-after: Verwenden Siepadding-block-end.-webkit-padding-before: Verwenden Siepadding-block-start.-webkit-padding-end: Verwenden Siepadding-inline-end.-webkit-padding-start: Verwenden Siepadding-inline-start.
-webkit-präfixierte Eigenschaftswerte
-webkit-fill-available-
Wird mit Größeneigenschaften wie
widthundheightverwendet, um Elemente den verfügbaren Raum innerhalb ihres übergeordneten Containers vollständig einnehmen zu lassen. Derstretch-Wert bietet einen standardisierten Ersatz, aber-webkit-fill-availablewird von Browsern aus Gründen der Rückwärtskompatibilität als Alias unterstützt.
Pseudoklassen
Hinweis: Wenn es eine ungültige Pseudoklasse innerhalb einer Kette oder Gruppe von Selektoren gibt, ist die gesamte Selektorenliste ungültig.
:-webkit-any(): Verwenden Sie:is:-webkit-any-link: Verwenden Sie:any-link:-webkit-autofill: Verwenden Sie:autofill:-webkit-autofill-strong-password: Verwenden Sie:autofill:-webkit-drag:-webkit-full-page-media: Verwenden Sie:fullscreen:-webkit-full-screen: Verwenden Sie:fullscreen:-webkit-full-screen-ancestor: Verwenden Sie:fullscreen:-webkit-full-screen-document: Verwenden Sie:fullscreen:-webkit-full-screen-controls-hidden: Verwenden Sie:fullscreen
Pseudoelemente
Aus Gründen der Webkompatibilität behandeln Blink-, WebKit- und Gecko-Browser alle Pseudoelemente, die mit ::-webkit- beginnen, als gültig. Wenn es ein ungültiges Pseudoelement oder eine ungültige Pseudoklasse innerhalb einer Kette oder Gruppe von Selektoren gibt, ist die gesamte Selektorenliste ungültig. Wenn ein Pseudoelement (aber nicht Pseudoklasse) ein -webkit- Präfix hat, gehen Blink-, WebKit- und Gecko-Browser davon aus, dass es gültig ist, wodurch die Selektorenliste nicht ungültig wird.
::-webkit-file-upload-button: Verwenden Sie::file-selector-button::-webkit-inner-spin-button::-webkit-input-placeholder: Verwenden Sie::placeholder::-webkit-meter-bar::-webkit-meter-even-less-good-value::-webkit-meter-inner-element::-webkit-meter-optimum-value::-webkit-meter-suboptimum-value::-webkit-progress-bar::-webkit-progress-inner-element::-webkit-progress-value::-webkit-search-cancel-button::-webkit-search-results-button::-webkit-slider-runnable-track::-webkit-slider-thumb
Medienmerkmale
-webkit-animation-webkit-device-pixel-ratio: Wird plattformübergreifend unterstützt-webkit-transform-2d-webkit-transform-3d: Wird plattformübergreifend unterstützt-webkit-transition