「脱IE」関連のことをCSSを中心にまとめました

まだ使えないものもありますが、今後のために
個人的には「Safari」がネックです^^;

*Grid Layoutとクリッピングとマスキング(clip-pathなど)は別の投稿です

目次
  1. 便利なプロパティ
    1. object-fit・object-position
    2. aspect-ratio
    3. -webkit-line-clamp
    4. scroll-behavior
    5. gap
    6. contain
    7. text-orientation
  2. 便利な値
    1. min・max・clamp
    2. position: sticky
    3. display: contents
    4. width: max-content
    5. revertとinitial
  3. 装飾系
    1. filter
    2. blend-mode
    3. accent-colorとcaret-color
  4. セレクタ
  5. その他
  6. Safari関連のこと

便利なプロパティ

object-fit・object-position

object-fit(Safari10から)
コンテナーに「img要素やvideo要素」をどのようにはめ込むかを設定します
object-position(Safari10から)
コンテナーのどこに配置するか
*polyfillが不要になります😊

.square{
  aspect-ratio: 1/1; /*古いSafariだと崩れて正方形にならないけど*/
  background: #1746A2;
 }
img.object-fit-contain{
  object-fit:contain;
   height: 100%;
   width: 100%;
}
img.object-fit-cover{
  object-fit:cover;
   height: 100%;
   width: 100%;
}
img.object-position{
  object-position: bottom;
  object-fit:contain;
  height: 100%;
  width: 100%;
}
<div class="square">
  <img class="object-fit-contain" src="https:.." >
</div>
<div class="square">
  <img class="object-fit-cover" src="https:.." >
</div>
<div class="square">
  <img class="object-position" src="https:.." >
</div>

aspect-ratio

aspect-ratio(Safari15から)
ウィンドウのサイズが変わってもコンテンツボックスに対してアスペクト比を維持できます(画像と同じ)
例では、縦横比を固定したBoxブロックに画像を配置します
*画像は95%にしています
1「padding-top」を使って画像分の高さを保持する方法
2これからは「aspect-ratio」を使う(簡単です)

/* Boxに対して padding-top でアスペクト比を固定*/
.padding-top{
  position: relative;
  width: 100%;
  height: 0;
  padding-top:75%; /* padding-top 縦幅/横幅 % */
}
.padding-top>img {
  position: absolute; 
  top: 0;
  left: 0;
  width:100%;
  height:100%;
}
/* Boxに対して aspect-ratio でアスペクト比を固定*/
.aspect-ratio{
  overflow: hidden;
  aspect-ratio: 4/3; /* aspect-ratio 縦横比 1:1 */
}
.aspect-ratio>img{
  width: 100%;
  height: 100%;
}

/*img要素ならこれでOK*/
.normal>img{
  width:100%;
  height:auto;
}
/*高さが固定されアスペクト比は維持できません*/
.normal-box{
 width:100%;
 height:100px;
}
<div class="padding-top">
   <img src="https:.." >
</div>
<div class="aspect-ratio">
   <img src="https:.." >
</div>
<div class="normal">
   <img src="https:.." >
</div>
<div class="normal-box"></div>

-webkit-line-clamp

-webkit-line-clamp
行数を制限できます
*コンテナー内のテキストを指定した行数だけ表示できます(JS不要)

ダミーテキスト

ダミーテキストダミーテキストダミーテキストダミーテキスト

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

p {
  width: 300px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

scroll-behavior

scroll-behavior(Safari15.4から)
ページ内のアンカーへのスムーススクロールが実装できます(JS不要)

<div class="scroll-container">
  <div id="page-1">1</div>
  <div id="page-2">2</div>
  <div id="page-3">3</div>
</div>
.scroll-container{
   scroll-behavior: smooth;
}

gap

gap(Safari 14.1から)
行や列の間のすき間を定義します

row-gapcolumn-gapの一括指定です
column-gapが省略されたときはrow-gapと同じ値が設定されます
*margin使用時と違い「:first-childなど擬似クラスにネガティブマージン設定等」をする必要がありません

contain

ブラウザが「レイアウト・スタイル・描画・寸法」の再計算を限られた領域に対して行います(ツリーの他の部分から独立)

  • none, strict, content
    単独で使用
  • size, layout, style, paint
    単独または任意の順序で使用

contain: content;(Safari15.4から)
*例では
floatの回り込みを解除する役割です(「clear:both;」や「overflow: hidden;」の代替え)
余談:display: flow-root;でも解除ができます

Contentテスト

Contentテスト

.contain-content > div{
  float: right;
}
.contain-content> p{
  float: left;
}
.contain-content{
  contain: content;
  border:solid 1px #ccc;
  padding:1rem;
}
<div class="contain-test">
   <div class="contain-content">
     <p>Contentテスト</p>
     <div style="width:100px;height:25px;background:#ccc"></div>
   </div>
   <div class="contain-content">
     <p>Contentテスト</p>
     <div style="width:100px;height:25px;background:#ccc"></div>
   </div>
 </div>

text-orientation

writing-mode:horizontal-tb以外の場合に有効
縦書き言語の表示を制御したり縦書きの表見出しを作成したりできます

text-orientation
text-orientation: upright;は横書き用の文字(数字や英語)も縦書きと同様に配置します
*古いsafariベンダープレフィクス

2023年謹賀新年

今年もよろしく

.text-orientation{
  background:#FFF;
  text-align:center;
  border:solid 1px #333;
  padding: 1rem;
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  text-orientation: upright;
}

便利な値

min・max・clamp

  • min()は、1つ以上のコンマ区切りの計算が含まれ、それらの最小値を表します
    最大値を設定するときに使用します
    (Safari11.1から)
  • max()は、1つ以上のコンマ区切りの計算が含まれ、それらの最大値を表します
    最小値を設定するときに使用します
    (Safari11.1から)
  • clamp()は、3つのパラメーター(最小値、推奨値、最大値)を使用します
    推奨値は、結果が最小値と最大値の間で使用される値の式です
    (Safari13.1から)

min()
コンテナーサイズを横幅の95% 、最大1000px

.container{
  margin: 0 auto;
  max-width: 1000px;
  width: 95%;
}
/*minでまとめると*/
.container{
  margin: 0 auto;
  width: min(95%, 1000px);
}

max()
コンテナーサイズを可変にして、左右にpadding(横幅の5%、最小値10px)

.container{
  padding: 0 max(10px, 5vw);
}
/*最小値は設定しない*/
.container{
  padding: 0 5vw;
}

clamp()
可変するフォントサイズを設定:font-size:

clamp(0.75rem, 0.659rem + 0.45vw, 1rem)

clamp(1rem, 0.909rem + 0.45vw, 1.25rem)

clamp(1.25rem, 1.159rem + 0.45vw, 1.5rem)

clamp(1.5rem, 1.318rem + 0.91vw, 2rem)

position: sticky

position: sticky
*古いsafariベンダープレフィクス
ヘッダーやフッターサイドバーの固定
stickyは要素の高さを有したまま親要素の範囲内で追従する動きをします
*fixedだと高さがなくなる(浮いた状態)なので直下にある要素が詰まります

ヘッダー
サイドバー
メインコンテンツ
    
.grid{
   display: grid;
   grid-template-columns: 30% 70%; 
}
.side-sticky-item{
  align-self: start; /*コンテンツの高さにするため*/
  position: sticky;
  top: 50px;
}
.header-sticky-item{
  position: sticky;
  top: 0;
}
/*フッターを固体する場合*/
.footer-sticky-item{
  position: sticky;
  bottom: 0;
}
<body>
  <header class="header-sticky-item">ヘッダー</header>
  <div class="grid">
     <aside class="side-sticky-item">サイドバー</aside>
     <main class="main">メインコンテンツ</main>
 </div>
  <footer class="footer-sticky-item">フッター</footer>
</body>

パララックスのイメージ(手抜きですが)

あいうえお
かきくけこ
さしすせそ
.sticky-parallax{
  overflow: scroll;
  height:300px;
}
.sticky-parallax > .item{
 height:300px;
}
.sticky-parallax > .text{
  position: sticky;
  top: 0;
/* gridで天地中央揃えも2行でできます */
  display: grid;
  place-items: center;
}
.sticky-parallax > .img{
  position: sticky;
  top: 0;
}
/* 以降、背景色の設置は省略 */
.sticky-parallax > .item:nth-child(1) {
  background: #B8E8FC;
}
<div class="sticky-parallax">
  <div class="img item"></div>
  <div class="text item">あいうえお</div>
  <div class="img item"></div>
  <div class="text item">かきくけこ</div>
  <div class="img item"></div>
  <div class="text item">さしすせそ</div>
</div>

stickyの注意点

  • スティッキーアイテムをラップする親要素がスティッキーコンテナーになります
  • スティッキーアイテムには兄弟要素が必要です
  • スティッキーコンテナにoverflow: hiddenoverflow: autoがあると効かない
    overflow: scrollで高さの指定があればOK
  • スティッキーアイテムにdisplay: inline-blockを指定するとSafariでスティッキーが効かないかも

display: contents

display: contents(Safari11.1から)
記述した要素はレイアウトに使用されなくなります
*セマンティックにマークアップしたタグをレイアウト目的(GlidやFlexの子要素にする為等)で外すことが可能です
例では、Flexboxでinnerクラスの要素を横並びにするために使います

1
2
3
4
.flex{
  text-align:center;
  display:flex;
}
.outer {
  display: contents;
} 
.inner {
  flex-grow:1;
  border:solid.1px #98A8F8;
}
<div class="flex">
  <div class="outer">
     <div class="inner">1</div>
     <div class="inner">2</div>
  </div>
  <div class="outer">
    <div class="inner">3</div>
    <div class="inner">4</div>
  </div>
</div>

width: max-content

max-content(Safari11から)
コンテンツの中身の最大幅や高さを表します
例:spanタグを省略できます
*(注意)テキストは折り返さないのでfit-contentの方がいい場合もあります
fit-contentはボックスは利用可能な空間を使用しmax-content以上にはならない

MAX CONTENT

.max-content > p{
 width: max-content;
 margin: 0 auto;
 padding:0.75rem;
 background:#FFDDD2;
 border-bottom: 3px solid #FF8DC7;
}
<div class="max-content">
 <p>MAX CONTENT</p>
</div>

revertとinitial

revert:ブラウザの設定値に戻します
initial:プロパティの初期値(または既定値)を設定します

ブラウザのデフォルトです

親要素の色を変更しましたここは初期値にします

h1 {font-size:revert}
p {color: green}
p > span {color: initial}
<h1>ブラウザのデフォルトです</h1>
<p>親要素の色を変更しました<span>ここは初期値にします</span></p>

備考:allプロパティ
要素の全てのプロパティに対して一括指定をします
allに指定できる値はinitial・inherit・revert・unsetです

  • initial:初期値
  • inherit:親要素の値を継承
  • revert:ブラウザの設定値
  • unset:親要素の継承値、なければ初期値

余談:今まで知らなかったことにショック!!
currentColorが便利そう😊
要素のテキストとボーダーとを一緒にしたい時などに

p{
color: #FF8DC7;
border-bottom: 1px solid currentColor;
}

装飾系

filter

  1. none
  2. blur(ぼかし)
  3. brightness(明度)
  4. contrast(コントラスト)
  5. drop-shadow(ドロップシャドウ)
  6. grayscale(グレースケール)
  7. hue-rotate(色相環)
  8. invert(階調の反転)
  9. opacity(不透明度)
  10. saturate(彩度)
  11. sepia(セピア)
img:nth-child(1){filter: none;}
img:nth-child(2){filter: blur(5px);}
img:nth-child(3){filter: brightness(0.5);}
img:nth-child(4){filter: contrast(1000%);}
img:nth-child(5){filter: drop-shadow(5px 5px 2px blue);}
img:nth-child(6){filter: grayscale(100%);}
img:nth-child(7){filter: hue-rotate(180deg);}
img:nth-child(8){filter: invert(75%);}
img:nth-child(9){filter: opacity(25%);}
img:nth-child(10){filter: saturate(1000%);}
img:nth-child(11){filter: sepia(100%);}

備考(メモ)
Safariは「filterプロパティ」を使うと処理が重くなるらしいです(GPUではなくCPUで行うため)
対策はtransformを使うことだそうです

.filter {
 filter: 値;
 transform: translateZ(0);
}

backdrop-filter(要ベンダープレフィックス: -webkit-)
要素の背後に適用できます
例では、テキストのオーバーレイにしています
*drop-shadowとopacityは変化なし

バックドロップ

バックドロップ

バックドロップ

バックドロップ

バックドロップ

バックドロップ

バックドロップ

バックドロップ

バックドロップ

バックドロップ

バックドロップ

.backdrop-filter{
 position: relative;
}
.backdrop-filter > div{
    position: absolute;
    top: 0;
    bottom: 50%;
    width:100%;
    backdrop-filter: 値;
     -webkit-backdrop-filter: 値;
}
.backdrop-filter > div >p{
  text-align:center;  
}
 <div class="backdrop-filter">
   <img src="https:...">
   <div><p>バックドロップ</p></div>
 </div>

blend-mode

*要素が重なったときにどのような色になるか

  1. normal 上の色が最終的な色
  2. multiply 黒いレイヤーは黒へ、白いレイヤーは変化なし
  3. screen 黒いレイヤーは変化なし、白いレイヤーは白へ
  4. overlay 下が暗ければ multiply、下が明るければ screen
  5. darken 最も暗い値
  6. lighten 最も明るい値
  7. color-dodge 覆い焼き(黒は変化なし)
  8. color-burn 焼き込み(白は変化なし)
  9. hard-light ハードライト
  10. soft-light ソフトライト
  11. difference 差の絶対値(黒は変化なし、白はもうひとつの色を反転)
  12. exclusion difference よりコントラストが低い
  13. hue 上の色相、下の彩度と明度
  14. saturation 上の彩度、下の色相と明度
  15. color 上の色相と彩度、下の明度(前景に色をつける)
  16. luminosity 上の明度、下の色相と彩度

mix-blend-mode
2つの要素が重なったときの見え方
例では画像の上にテキストを重ねた時のテキストの色を変化させます

ブレンドモードです

.mix-blend-mode{
  position: relative;
}
.mix-blend-mode> img{
 width:100%;
}
.mix-blend-mode > p{
   mix-blend-mode:値;
   position: absolute;
   top: 15%;
   left: 50%;
   transform: translate(-50%);
   font-size: clamp(1.5rem, 4vw, 2.5rem);
   font-weight: bold;
}
 <div class="mix-blend-mode">
   <img src="https:..." />
   <p>ブレンドモードです</p>
 </div>

background-blend-mode
background属性内でブレンドモードを使うときに使用します
例では背景画像に「青から白のグラデーション」を重ねています

.background-blend-mode{
   background-image: url(画像パスやURL)
  ,linear-gradient( to right, green, yellow );
   background-repeat:no-repeat;
   background-size: cover;
   height: 250px;
   background-blend-mode:値;
}
<div class="background-blend-mode"></div>

余談
グラデーションの描画では linear-gradient()のほかに
conic-gradient() :中心点の周りを回りながら色が変化 なども…

accent-colorとcaret-color

accent-color(Safari15.4から)
フォーム要素のチェックボックス・ラジオボタンなどに色をつけることができます
caret-color(Safari11.1から)
入力カーソルの色を変更できます

チェックボックス
ラジオボタン
入力フォーム
.accent-color {
  accent-color: #B3FFAE;
}
.caret-color{
 caret-color: red;
}
<div><input type="checkbox" class="accent-color" checked>チェックボックス</div>
<div><input type="radio" class="accent-color" checked>ラジオボタン</div>
<div><input type="range" class="accent-color" value="50"></div>
<div><progress class="accent-color" max="100" value="50"></progress></div>
<div>入力フォーム<input type="text" class="caret-color"></div>

*備考
appearance:noneはフォーム部品等のブラウザデフォルトのデザインを消します

input{
 -webkit-appearance:none;
 -moz-appearance:none;
  appearance:none
}

セレクタ

:where() (Safari14から)
()内に列挙されたセレクターに当てはまるすべての要素
()内の詳細度は0です
*:is():は同じ機能ですが詳細度が高くなります
:focus-visible(Safari15.4から)
:focus 擬似クラスに一致している時(ブラウザが青い枠を表示するとき)
なのでフォーカス時の青線を変えたいとき
:focus-within(Safari10.1から)
form:focus-withinでフォームの中の要素にフォーカスが当たると起動します
:in-rangeと:out-of-range
min と max 属性による制限をしているときのinput要素への入力値が
範囲内か範囲外か
:placeholder-shown
placeholderが表示されているときのみ適用されます
::placeholder疑似要素(Safari10.1から)
プレースホルダーにCSS(フォントに関するプロパティや背景に関するプロパティ)を適用できます
input::placeholder{ color: blue;}
::file-selector-button(Safari14.1から)
inputのtype=”file”のファイル選択ボタン
input::file-selector-button{color: blue;}
::marker疑似要素(Safari10.1から)
リスト項目の箇条書き記号を選択します
*Safari は色とフォント サイズに制限されています
li::marker {color: red;}

その他

カスタム変数
--変数名(ハイフン2つをつけて)、var(--変数名)で呼び出します
:root(擬似クラス)に定義すると HTML全体で適用できます

:root {
  --main-color: #ccc;
}

body {
  background-color: var(--main-color);
}

メディアクエリ

  • ダークモードに対応しているOS/ブラウザの識別
    @media (prefers-color-scheme: dark) {}
  • 比較演算子の使用
    @media (400px <= width <= 600px ) {}
  • マウスポインタのあるデバイスかどうか(hoverに対応の有無)
    @media (any-hover: none){ hoverに対応なし }
    @media (any-hover: hover){ hoverに対応あり}

HTMLタグ

detailsとsummaryでアコーディオンが実装できます(JS不要)

質問

答え

<details>
  <summary>質問</summary>
  <p>答え</p>
</details>

faviconについて

16px✖️16pxはIEだけなので不要
.ico画像も不要でPNGでOK
SVG でもOKでその場合は

<link rel="icon" href="/favicon.svg" type="image/svg+xml">

ボックスモデル(物理プロパティ)と論理プロパティ

CSS GridやFlexboxは論理プロパティを使っています

  • 横書きの言語
    inlineは横方向・blockは縦方向 それぞれにstartend
    widthはinline-size・heightはblock-size
  • 縦書きの言語
    inlineは縦方向・blockは横方向 それぞれにstartend
    widthはblock-size・heightはinline-size

例:margin-inline(Safari14.1から)
margin-inline: auto;で中央寄せ

あいうえお

Safari関連のこと

iPhoneは自動でフォントサイズを変更します
自動フォントサイズ変更を解除することができます

body{
-webkit-text-size-adjust:100%;
}

*iPhoneのフォーム入力時にズームインされる場合は文字が16px未満になています
font-sizeを16px以上に設定すればズームしません

Safari14.1未満に対応するためのハック
*ほぼgapの対策ですSafariでサポートされているけどSafari14.1未満のバージョンでは非対応です

@media not all and (min-resolution:.001dpcm) {
  @supports (not (translate: none)) {
    /* Safari14.1未満に適用されるCSS */
  }
}

要素に100vhを設定したいけどiOSのSafariでは100vhの計算にアドレスバーが考慮されてない

@supports (-webkit-touch-callout: none) {
html{
  height: -webkit-fill-available;
} 
body {
 min-height: 100vh;
 height: -webkit-fill-available;
}

Safari15.4でアドレスバーなどを動的に考慮したサイ「dvh」がサポートされました

.element {
   min-height: 100vh; /*他のブラウザのフォールバック*/
   min-height: 100dvh;
}

env()
ユーザーエージェントが定義した環境変数の値を挿入します
iOSブラウザーでビューポートの安全な領域に配置できるように提供されていた仕様
例えばフッターメニューを固定したときなど、セーフエリアにかからないようにするために使用します

env(safe-area-inset-top);
env(safe-area-inset-right);
env(safe-area-inset-bottom);
env(safe-area-inset-left);