Reduced CSS file size.

pb-100 · Mar 10, 2024 · 3e36c2e · 3e36c2e
1 parent 377eddb
commit 3e36c2e
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 14 deletions.
diff --git a/src/scss/common/variables.scss b/src/scss/common/variables.scss
@@ -7,4 +7,7 @@ $HAS_PAINT_BUG_AROUND_CSSP : $IS_LTE_GECKO09 or $UA_Gecko12 or $UA_Gecko13;
 // Gecko ~0.8.1 では何故か border-box を設定しない方が良い
 $PBCHRBASE_IS_BORDER_BOX : $BORDER_BOX_ALLWAYS or ( $OPTION_USE_PBCHR and ( $UA_Gecko09 or $UA_Gecko12 or $UA_Gecko13 or $UA_Gecko19 ) );
 
-$IS_GECKO_USE_MOZ_OPACITY : $UA_Gecko09 or $UA_Gecko12 or $IS_GECKO13_TO_19;
+$IS_GECKO_USE_MOZ_OPACITY : $UA_Gecko09 or $UA_Gecko12 or $IS_GECKO13_TO_19;
+
+/* ハイコントラストモードの white-on-black で Edge, IE8~11 で空白が四角になる https://twitter.com/pbrocky/status/1223672870749949952 */
+$PATCH_FOR_PBCHR_SPACE : $IS_IE8_OR_9 or $UA_Modern;
diff --git a/src/scss/mixin/pbChrBase.scss b/src/scss/mixin/pbChrBase.scss
@@ -2,12 +2,13 @@
 --------------------------------------------------------------------------------------*/
 %PBChrBase{
     @include inline-block; // Gecko 0.9.4~ -moz-inline-box が有効
-
     @if( $CANUSE_GOOD_CSS_GENERATED_BLOCK ){
         position : relative;
     }
     @if( $OPTION_USE_PBLIST and $OPTION_USE_WEBFONT_FALLBACK ){
-        visibility : visible !important; /* ハイコントラストモードの white-on-black で Edge, IE8~11 で空白が四角になる https://twitter.com/pbrocky/status/1223672870749949952 */
+        @if( $PATCH_FOR_PBCHR_SPACE ){
+            visibility : visible !important;
+        }
     }
     padding     : 0;
     overflow    : hidden;
@@ -17,7 +18,7 @@
     font-style  : normal;
 
     @if( $OPTION_USE_PBCHR and $PBCHRBASE_IS_BORDER_BOX ){
-        @include box-sizing(border-box); // for old Gecko
+        @include box-sizing(border-box);
         width  : 14px;
         height : 27px;
     } @else {
@@ -35,7 +36,7 @@
         text-indent : 21px;
     } @else if( $IS_OLD_GECKO and $UA_Gecko19 == false ){
         @if( $OPTION_USE_PBLCD or $OPTION_USE_PBLIST ){
-            text-indent : -42px; // Gecko ~1.8.1 inline-block のテキストを消すことが出来ない
+            text-indent : -42px; // Gecko ~1.8.1 inline-block のテキストを消すことが出来ないので pbChr 限定の場合は text-indent しない
         }
     } @else {
         text-indent : -42px;
@@ -61,16 +62,16 @@
     } @else {
         @if( $CANUSE_CSS_GENERATED_BLOCK ){
             @if( $UA_Opera9 ){
-                &:after, /* for pbLCD */
-                &:before {
-                    left : 12px; /* space */
+                @if( $OPTION_USE_PBLCD ){
+                    &:after { left : 12px; } /* space */
                 }
+                &:before { left : 12px; } /* space */
                 @include createPbChrUrl( 'x3.gif', 1582px, 21px );
             } @else { // Opera 7.2~8.5
-                &:after, /* for pbLCD */
-                &:before {
-                    left : 12px; /* space */
+                @if( $OPTION_USE_PBLCD ){
+                    &:after { left : 12px; } /* space */
                 }
+                &:before { left : 12px; } /* space */
                 @include createPbChrUrl( 'x3_x10.png', 1572px, 239px );
             }
         } @else if( $IS_OLD_GECKO ){

diff --git a/src/scss/pbList/03_fallback.scss b/src/scss/pbList/03_fallback.scss
@@ -34,8 +34,11 @@ $FLOAT_FONT_ELEMENT : $UA_Opera70 or $IS_LTE_GECKO09 or $UA_Gecko12 or $UA_Gecko
                 font-size   : 21px;
                 line-height : 1;
                 overflow    : hidden;
-                visibility  : hidden; /* https://twitter.com/pbrocky/status/1223672870749949952 */
-
+
+                @if( $PATCH_FOR_PBCHR_SPACE ){
+                    visibility  : hidden; /* `hidden` only appling space */
+                }
+
                 @if( $UA_Modern or $IS_IE8_OR_9 or $IS_LTE_GECKO09 ){
                     margin : 5px 1px;
                 } @else {
@@ -47,7 +50,7 @@ $FLOAT_FONT_ELEMENT : $UA_Opera70 or $IS_LTE_GECKO09 or $UA_Gecko12 or $UA_Gecko
                     @include inline-block;
                 }
                 @if( $UA_Modern ){
-                    vertical-align : top; /* 3DS 行がズレる */
+                    vertical-align : top; /* 3DS 行がズレる https://x.com/pbrocky/status/1042771141591330817 */
                 }
                 @if( $FLOAT_FONT_ELEMENT ){
                     /* https://twitter.com/pbrocky/status/1450728844021796864 Gecko 0.9.4 float が無いとプログラムエリアの下に隙間が空く */