Prefixed CSS First
authorSascha Greuel <github@1-2.dev>
Fri, 6 Aug 2021 18:42:21 +0000 (20:42 +0200)
committerSascha Greuel <github@1-2.dev>
Fri, 6 Aug 2021 18:42:21 +0000 (20:42 +0200)
Ensured vendor-prefixed versions of a CSS property are listed before the standardized, unprefixed version.

When multiple versions of the same CSS property are specified, the last supported one will be used due to how browsers handle fallback values. This means the order matters when using both vendor-prefixed and unprefixed versions of the same property. Specifically, the unprefixed version must be listed last to ensure standardized behavior takes precedence.

wcfsetup/install/files/style/bbcode/inlineCode.scss
wcfsetup/install/files/style/layout/global.scss
wcfsetup/install/files/style/ui/imageViewer.scss

index 4d2049e398a97c04d0f1d4e680b30e5548c04520..28ea542192ffdcc4c81d5154b2e29892b8fece8d 100644 (file)
@@ -11,8 +11,8 @@ kbd {
        background-color: rgba(255, 255, 255, 1) !important;
        border: 1px solid rgba(196, 196, 196, 1) !important;
        border-radius: 2px;
-       box-decoration-break: clone;
        -webkit-box-decoration-break: clone;
+       box-decoration-break: clone;
        color: rgba(68, 68, 68, 1) !important;
        display: inline;
        font-family: $wcfFontFamilyMonospace;
index d3e981f828f9d2362d2f51b12651e2a80df1bd8c..670efa99d7eae0ae0009b7ed5be46274349fb0f8 100644 (file)
@@ -23,8 +23,8 @@
 }
 
 .grayscale {
-       filter: gray;
        -webkit-filter: grayscale(1);
+       filter: gray;
 }
 
 .monospace {
index cfbcd22dcb10f2720331990a3af63a7558a7b94d..39c08df6d62edc77c002cebe98ede24294a71f54 100644 (file)
@@ -144,8 +144,8 @@ $wcfImageViewerFontColor: rgba(211, 211, 211, 1);
        > header,
        > div,
        > footer {
-               box-sizing: border-box;
                -moz-box-sizing: border-box;
+               box-sizing: border-box;
                left: 0;
                position: fixed;
                right: 0;
@@ -313,8 +313,8 @@ $wcfImageViewerFontColor: rgba(211, 211, 211, 1);
                padding: 10px;
 
                &:hover > div > ul > li > img {
-                       filter: none;
                        -webkit-filter: none;
+                       filter: none;
                }
 
                > span {
@@ -377,8 +377,8 @@ $wcfImageViewerFontColor: rgba(211, 211, 211, 1);
                                        }
 
                                        &.active > img {
-                                               filter: none;
                                                -webkit-filter: none;
+                                               filter: none;
                                        }
 
                                        &.loading {