latest posts title

縦長画像の、上下がトリミングされる

WordPress の CSS「mediaelement-css」と「wp-mediaelement-css」の削除方法 | Nakata Katsuhisa ICT Yorozu Weblog

dequeue する ハンドル名は wp-mediaelement（ -css は不要）。

WordPress バージョン 6.4.2 にて確認しました。

function my_enqueue_style(){
wp_dequeue_style( 'wp-mediaelement' );
}
add_action( 'wp_enqueue_scripts', ‘my_enqueue_style' );

wp_dequeue_style( ‘wp-mediaelement’ ); を指定するだけで、mediaelement-css も一緒に削除されることを確認しました。

WordPress テーマを自作する場合など、不要な CSS を読み込みたくない場合の参考に。

WordPressでglobal-styles-inline-cssを無効化する｜Webgaku（ウェブガク）

add_action( 'wp_enqueue_scripts', 'remove_global_styles' );
function remove_global_styles(){
    wp_dequeue_style( 'global-styles' );
}

WordPress 5.9以降、wp_head()からグローバルスタイルが出力されるようになりました。

theme.jsonを使用していないクラシックテーマでもグローバルスタイルが読み込まれます。

クラシックテーマとブロックテーマについては以下のページをご参考ください。

WordPress の CSS「wp-block-library-css」の削除方法 | Nakata Katsuhisa ICT Yorozu Weblog

dequeue する ハンドル名は wp-block-library（ -css は不要）。

function my_enqueue_style(){
wp_dequeue_style( 'wp-block-library' );
}
add_action( 'wp_enqueue_scripts', ‘my_enqueue_style' );

WordPress テーマを自作する場合など、不要な CSS を読み込みたくない場合の参考に。

レイアウト崩れは、ascpect-ratio をグリッドでunset していたのが原因だった

img:is([sizes="auto" i], [sizes^="auto," i]) { contain-intrinsic-size: 3000px 1500px }

このCSSルールセットが適用された場合の、emulsion テーマの表示はどのように変化するのか

contain-intrinsic-size を適用しない

ブラウザのユーザーエージェントスタイルで、適切な設定が行われているようです

閉じ角括弧の前に i (または I) を追加すると、 (ASCII の範囲内の文字の場合) 値は大文字と小文字を区別せずに比較されます。

contain-intrinsic-size を適用した場合

グリッドレイアウトや段組みレイアウトでは、明示的にサイズを指定すると、暗黙的なコンテンツベースの高さとは異なる扱いを受けます。 要素は、単にその高さまでコンテンツで満たされた場合とは大幅に異なるレイアウトになるかもしれません。 auto none 値を指定すると、記憶された値がない場合に要素を contain-intrinsic-size: none にフォールバックし、コンテンツがないかのようにレイアウトすることができます。グリッドレイアウトや段組みレイアウトでは、コンテナーそのものが親要素からはみ出す可能性があり、予期しないページレイアウトになる可能性があるため、内在サイズとして 0px を設定するよりも常に推奨されます。

https://developer.mozilla.org/ja/docs/Web/CSS/contain-intrinsic-size

https://developer.mozilla.org/ja/docs/Web/CSS/Attribute_selectors

フィルタ関数

/**
 * Prints a CSS rule to fix potential visual issues with images using `sizes=auto`.
 *
 * This rule overrides the similar rule in the default user agent stylesheet, to avoid images that use e.g.
 * `width: auto` or `width: fit-content` to appear smaller.
 *
 * @since 6.7.1
 * @see https://html.spec.whatwg.org/multipage/rendering.html#img-contain-size
 * @see https://core.trac.wordpress.org/ticket/62413
 */
function wp_print_auto_sizes_contain_css_fix() {
	/** This filter is documented in wp-includes/media.php */
	$add_auto_sizes = apply_filters( 'wp_img_tag_add_auto_sizes', true );
	if ( ! $add_auto_sizes ) {
		return;
	}

	?>
	img:is([sizes="auto" i], [sizes^="auto," i]) { contain-intrinsic-size: 3000px 1500px }
	<?php
}

[attr^=value]

attr という名前の属性の値が value で始まる要素を表します

[attr operator value i]

https://reference.hyper-text.org/css/propaty/contain-intrinsic-width

https://triple-underscore.github.io/css-contain-ja.html#style-containment

画像ファイルのパスと横幅はsrcset属性

画像ファイルのパスと横幅は、imgタグのsrcset属性に記述します。「画像ファイルの横幅」は、「画像をウェブページ上で表示する際の横幅」ではないことに注意してください。

srcset="images/small.jpg 320w,
      images/medium.jpg 640w,
      images/large.jpg 1280w"

パスと横幅の間には半角スペースを挿入します。横幅の単位はpxでなくw（幅記述子）を用います。small.jpgは320pxの画像、medium.jpgは640pxの画像、large.jpgは1280pxの画像である、という情報をブラウザに伝えています。