段落を整えて表示する−その⑨

AMPのスタイルシート

css を削減するべく 実際に記事として公開されている AMP ページの html ソース のスタイルシート部分 を眺めていました

WordPressCocoon 親テーマ自作スキン と書き出されているスタイル指定の中で二点 気になった事がありました

スポンサーリンク

calc()

calc()、、、 存在は知っていました しかし これは scss だと思い込んでいました これが css 内で記述できるのであれば 固定解像度毎の記述を統一出来るのでは、、、 つまり css の削減が可能になるのでは?

結論から述べると

ダメでした

scss

後日 使える日が来た時用にソースを残しておきます 忘備録ですね

 $font_width_n: $font_width / 1px; 
 @each $class, $count in $cocoon_block_class { 
   .#{$class} { 
     @for $i from 2 through $thx_beta_column_loop { 
       $i_1: $i - 1; 
       .has-#{$i}-columns{ 
         .wp-block-column{ 
           margin-right: calc( 
           ((67% - #{$contents_padding} * 2 
           - 
           (67% - #{$contents_padding} * 2 mod #{$font_width_n}) 
           - 
           #{$font_width} * #{$count}) 
           mod 
           (#{$font_width_n} * #{$i})) 
           / #{$i_1} + #{$column_margin} 
           ); 
         } 
       } 
     } 
   } 
 } 

もう一つの気になった点

使用されているスタイルのみ読み込まれている?

AMP ページの <head> <style amp-custom> AMP 用のスタイルが記述されていますが 例えばブログカード

 .bct-reference .blogcard::before{ 
 content:"  参考記事 " 
 } 

の様に記述されていますが そのページ内で使用していないラベル用の css は記述されていません

となると 以前 css セレクタをまとめたことによって

 .wp-block-columns.has-2-columns .wp-block-column, 
 .wp-block-columns.has-5-columns .wp-block-column, 
 .blank-box .wp-block-columns.has-2-columns .wp-block-column, 
 .blank-box .wp-block-columns.has-3-columns .wp-block-column, 
 .blank-box .wp-block-columns.has-4-columns .wp-block-column, 
 .blank-box .wp-block-columns.has-6-columns .wp-block-column, 
 .secondary-box .wp-block-columns.has-2-columns .wp-block-column, 
 .secondary-box .wp-block-columns.has-3-columns .wp-block-column, 
 .secondary-box .wp-block-columns.has-4-columns .wp-block-column, 
 .secondary-box .wp-block-columns.has-6-columns .wp-block-column, 
 .toggle-content .wp-block-columns.has-2-columns .wp-block-column, 
 .toggle-content .wp-block-columns.has-3-columns .wp-block-column, 
 .toggle-content .wp-block-columns.has-4-columns .wp-block-column, 
 .toggle-content .wp-block-columns.has-6-columns .wp-block-column, 
 .sticky .wp-block-columns.has-2-columns .wp-block-column, 
 .common-icon-box .wp-block-columns.has-3-columns .wp-block-column, 
 .common-icon-box .wp-block-columns.has-5-columns .wp-block-column { 
   margin-right: 54px; 
 } 

こんな事になっている css って 使っていない css セレクタまで読み込まれているワケですから 相当な無駄記述になっちゃってます

またもや 方針変更ですね

css セレクタはまとめずに 個別記述に戻します ;;

今後の対応

前々回の記事にて 三つの問題点を見つけました

  • スタイル指定が同一の cssセレクタをまとめられないかな?
  • そもそも、4〜6カラムって使うのか?
  • cssセレクタに使っているクラス名が長いよ、、、

セレクタまとめに効力が無かったため 次の 2 つに取り掛かります

コメント