feat: 新在样式兼容前缀适配

package.json

@@ -15,8 +15,15 @@
     "retain.min.css"
   ],
   "browserslist": [
-    "> 3%",
-    "last 2 versions"
+    "ie >= 8",
+    "ie_mob >= 10",
+    "ff >= 26",
+    "chrome >= 30",
+    "safari >= 6",
+    "opera >= 23",
+    "ios >= 5",
+    "android >= 2.3",
+    "bb >= 10"
   ],
   "dependencies": {
     "cssnano": "^6.0.1",

retain.css

@@ -49,7 +49,6 @@
     content: '';
     top: 0;
     left: 0;
-    -webkit-box-sizing: border-box;
     box-sizing: border-box;
     width: 100%;
     height: 100%;
@@ -62,7 +61,6 @@
     content: '';
     top: 0;
     left: 0;
-    -webkit-box-sizing: border-box;
     box-sizing: border-box;
     width: 100%;
     height: 100%;
@@ -71,20 +69,17 @@
     pointer-events: none;
 }
 
-@media (-webkit-min-device-pixel-ratio: 1.5),
-(min-device-pixel-ratio: 1.5),
+@media (min-device-pixel-ratio: 1.5),
 (min-resolution: 144dpi),
 (min-resolution: 1.5dppx) {
 
     [retain~="border:top"]:before,
     [retain~="border:bottom"]:after {
-        -webkit-transform: scaleY(0.5);
         transform: scaleY(0.5);
     }
 
     [retain~="border:left"]:before,
     [retain~="border:right"]:after {
-        -webkit-transform: scaleX(0.5);
         transform: scaleX(0.5);
     }
 
@@ -92,7 +87,6 @@
     [retain~="round"]:after {
         width: 200%;
         height: 200%;
-        -webkit-transform: scale(0.5);
         transform: scale(0.5);
     }
 
@@ -104,28 +98,24 @@
     [retain~="border:left"]:before,
     [retain~="border"]:after,
     [retain~="round"]:after {
-        -webkit-transform-origin: 0 0;
         transform-origin: 0 0;
     }
 
     [retain~="border:bottom"]:after,
     [retain~="border:right"]:after {
-        -webkit-transform-origin: 100% 100%;
         transform-origin: 100% 100%;
     }
 }
 
-@media (-webkit-device-pixel-ratio: 1.5) {
+@media (device-pixel-ratio: 1.5) {
 
     [retain~="border:top"]:before,
     [retain~="border:bottom"]:after {
-        -webkit-transform: scaleY(0.6666);
         transform: scaleY(0.6666);
     }
 
     [retain~="border:left"]:before,
     [retain~="border:right"]:after {
-        -webkit-transform: scaleX(0.6666);
         transform: scaleX(0.6666);
     }
 
@@ -133,7 +123,6 @@
     [retain~="round"]:after {
         width: 150%;
         height: 150%;
-        -webkit-transform: scale(0.6666);
         transform: scale(0.6666);
     }
 
@@ -142,17 +131,15 @@
     }
 }
 
-@media (-webkit-device-pixel-ratio: 3) {
+@media (device-pixel-ratio: 3) {
 
     [retain~="border:top"]:before,
     [retain~="border:bottom"]:after {
-        -webkit-transform: scaleY(0.3333);
         transform: scaleY(0.3333);
     }
 
     [retain~="border:left"]:before,
     [retain~="border:right"]:after {
-        -webkit-transform: scaleX(0.3333);
         transform: scaleX(0.3333);
     }
 
@@ -160,7 +147,6 @@
     [retain~="round"]:after {
         width: 300%;
         height: 300%;
-        -webkit-transform: scale(0.3333);
         transform: scale(0.3333);
     }
 

retain.min.css

-
 @charset "UTF-8";
+
 /*!
  * retain.css
- * Version - 1.0.4
+ * Version - 1.0.5
  * Licensed under the Hippocratic License 2.1 - http://firstdonoharm.dev
  *
  * Copyright (c) 2023 zhengxiao
- */[retain]{--retain-border-color:#d4d4d4;--retain-border-radius:40px;position:relative;position:relative!important}[retain~="border:bottom"]:after,[retain~="border:top"]:before{background:var(--retain-border-color);content:"";height:1px;left:0;pointer-events:none;position:absolute;right:0}[retain~="border:top"]:before{top:0}[retain~="border:bottom"]:after{bottom:0}[retain~="border:left"]:before,[retain~="border:right"]:after{background:var(--retain-border-color);bottom:0;content:"";pointer-events:none;position:absolute;top:0;width:1px}[retain~="border:left"]:before{left:0}[retain~="border:right"]:after{right:0}[retain~=border]:after{border:1px solid var(--retain-border-color)}[retain~=border]:after,[retain~=round]:after{-webkit-box-sizing:border-box;box-sizing:border-box;content:"";height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}[retain~=round]:after{border:1px solid var(--retain-border-color);border-radius:var(--retain-border-radius)}@media (-webkit-min-device-pixel-ratio:1.5),(min-device-pixel-ratio:1.5),(min-resolution:1.5dppx),(min-resolution:144dpi){[retain~="border:bottom"]:after,[retain~="border:top"]:before{-webkit-transform:scaleY(.5);transform:scaleY(.5)}[retain~="border:left"]:before,[retain~="border:right"]:after{-webkit-transform:scaleX(.5);transform:scaleX(.5)}[retain~=border]:after,[retain~=round]:after{height:200%;-webkit-transform:scale(.5);transform:scale(.5);width:200%}[retain~=round]:after{border-radius:calc(var(--retain-border-radius)*2)}[retain~="border:left"]:before,[retain~="border:top"]:before,[retain~=border]:after,[retain~=round]:after{-webkit-transform-origin:0 0;transform-origin:0 0}[retain~="border:bottom"]:after,[retain~="border:right"]:after{-webkit-transform-origin:100% 100%;transform-origin:100% 100%}}@media (-webkit-device-pixel-ratio:1.5){[retain~="border:bottom"]:after,[retain~="border:top"]:before{-webkit-transform:scaleY(.6666);transform:scaleY(.6666)}[retain~="border:left"]:before,[retain~="border:right"]:after{-webkit-transform:scaleX(.6666);transform:scaleX(.6666)}[retain~=border]:after,[retain~=round]:after{height:150%;-webkit-transform:scale(.6666);transform:scale(.6666);width:150%}[retain~=round]:after{border-radius:calc(var(--retain-border-radius)*1.5)}}@media (-webkit-device-pixel-ratio:3){[retain~="border:bottom"]:after,[retain~="border:top"]:before{-webkit-transform:scaleY(.3333);transform:scaleY(.3333)}[retain~="border:left"]:before,[retain~="border:right"]:after{-webkit-transform:scaleX(.3333);transform:scaleX(.3333)}[retain~=border]:after,[retain~=round]:after{height:300%;-webkit-transform:scale(.3333);transform:scale(.3333);width:300%}[retain~=round]:after{border-radius:calc(var(--retain-border-radius)*3)}}
+ */
\ No newline at end of file
+[retain] {
+    --retain-border-color: #d4d4d4;
+    --retain-border-radius: 40px;
+    position: relative;
+    position: relative !important;
+    -webkit-transition: all .3;
+    transition: all .3
+}
+
+[retain~="border:bottom"]:after,
+[retain~="border:top"]:before {
+    background: var(--retain-border-color);
+    content: "";
+    height: 1px;
+    left: 0;
+    pointer-events: none;
+    position: absolute;
+    right: 0
+}
+
+[retain~="border:top"]:before {
+    top: 0
+}
+
+[retain~="border:bottom"]:after {
+    bottom: 0
+}
+
+[retain~="border:left"]:before,
+[retain~="border:right"]:after {
+    background: var(--retain-border-color);
+    bottom: 0;
+    content: "";
+    pointer-events: none;
+    position: absolute;
+    top: 0;
+    width: 1px
+}
+
+[retain~="border:left"]:before {
+    left: 0
+}
+
+[retain~="border:right"]:after {
+    right: 0
+}
+
+[retain~=border]:after {
+    border: 1px solid var(--retain-border-color);
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    content: "";
+    height: 100%;
+    left: 0;
+    pointer-events: none;
+    position: absolute;
+    top: 0;
+    width: 100%
+}
+
+[retain~=round]:after {
+    border: 1px solid var(--retain-border-color);
+    border-radius: var(--retain-border-radius);
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    content: "";
+    height: 100%;
+    left: 0;
+    pointer-events: none;
+    position: absolute;
+    top: 0;
+    width: 100%
+}
+
+@media (-webkit-min-device-pixel-ratio:1.5),
+(min-device-pixel-ratio:1.5),
+(min-resolution:1.5dppx),
+(min-resolution:144dpi) {
+
+    [retain~="border:bottom"]:after,
+    [retain~="border:top"]:before {
+        -webkit-transform: scaleY(.5);
+        -ms-transform: scaleY(.5);
+        transform: scaleY(.5)
+    }
+
+    [retain~="border:left"]:before,
+    [retain~="border:right"]:after {
+        -webkit-transform: scaleX(.5);
+        -ms-transform: scaleX(.5);
+        transform: scaleX(.5)
+    }
+
+    [retain~=border]:after,
+    [retain~=round]:after {
+        height: 200%;
+        -webkit-transform: scale(.5);
+        -ms-transform: scale(.5);
+        transform: scale(.5);
+        width: 200%
+    }
+
+    [retain~=round]:after {
+        border-radius: -webkit-calc(var(--retain-border-radius)*2);
+        border-radius: calc(var(--retain-border-radius)*2)
+    }
+
+    [retain~="border:left"]:before,
+    [retain~="border:top"]:before,
+    [retain~=border]:after,
+    [retain~=round]:after {
+        -webkit-transform-origin: 0 0;
+        -ms-transform-origin: 0 0;
+        transform-origin: 0 0
+    }
+
+    [retain~="border:bottom"]:after,
+    [retain~="border:right"]:after {
+        -webkit-transform-origin: 100% 100%;
+        -ms-transform-origin: 100% 100%;
+        transform-origin: 100% 100%
+    }
+}
+
+@media (device-pixel-ratio:1.5) {
+
+    [retain~="border:bottom"]:after,
+    [retain~="border:top"]:before {
+        -webkit-transform: scaleY(.6666);
+        -ms-transform: scaleY(.6666);
+        transform: scaleY(.6666)
+    }
+
+    [retain~="border:left"]:before,
+    [retain~="border:right"]:after {
+        -webkit-transform: scaleX(.6666);
+        -ms-transform: scaleX(.6666);
+        transform: scaleX(.6666)
+    }
+
+    [retain~=border]:after,
+    [retain~=round]:after {
+        height: 150%;
+        -webkit-transform: scale(.6666);
+        -ms-transform: scale(.6666);
+        transform: scale(.6666);
+        width: 150%
+    }
+
+    [retain~=round]:after {
+        border-radius: -webkit-calc(var(--retain-border-radius)*1.5);
+        border-radius: calc(var(--retain-border-radius)*1.5)
+    }
+}
+
+@media (device-pixel-ratio:3) {
+
+    [retain~="border:bottom"]:after,
+    [retain~="border:top"]:before {
+        -webkit-transform: scaleY(.3333);
+        -ms-transform: scaleY(.3333);
+        transform: scaleY(.3333)
+    }
+
+    [retain~="border:left"]:before,
+    [retain~="border:right"]:after {
+        -webkit-transform: scaleX(.3333);
+        -ms-transform: scaleX(.3333);
+        transform: scaleX(.3333)
+    }
+
+    [retain~=border]:after,
+    [retain~=round]:after {
+        height: 300%;
+        -webkit-transform: scale(.3333);
+        -ms-transform: scale(.3333);
+        transform: scale(.3333);
+        width: 300%
+    }
+
+    [retain~=round]:after {
+        border-radius: -webkit-calc(var(--retain-border-radius)*3);
+        border-radius: calc(var(--retain-border-radius)*3)
+    }
+}
\ No newline at end of file