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

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

Grid Layoutについて

clip-pathの活用

便利なプロパティ

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%にしています
１「padding-top」を使って画像分の高さを保持する方法
２これからは「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-gapとcolumn-gapの一括指定です
column-gapが省略されたときはrow-gapと同じ値が設定されます
＊margin使用時と違い「:first-childなど擬似クラスにネガティブマージン設定等」をする必要がありません

contain

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

CSS 封じ込め

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

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

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（横幅の５％、最小値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: hidden、overflow: autoがあると効かない
＊overflow: scrollで高さの指定があればOK
スティッキーアイテムにdisplay: inline-blockを指定するとSafariでスティッキーが効かないかも

display: contents

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

.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

none
blur（ぼかし）
brightness（明度）
contrast（コントラスト）
drop-shadow（ドロップシャドウ）
grayscale（グレースケール）
hue-rotate（色相環）
invert（階調の反転）
opacity（不透明度）
saturate（彩度）
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

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

normal 上の色が最終的な色
multiply 黒いレイヤーは黒へ、白いレイヤーは変化なし
screen 黒いレイヤーは変化なし、白いレイヤーは白へ
overlay 下が暗ければ multiply、下が明るければ screen
darken 最も暗い値
lighten 最も明るい値
color-dodge 覆い焼き（黒は変化なし）
color-burn 焼き込み（白は変化なし）
hard-light ハードライト
soft-light ソフトライト
difference 差の絶対値（黒は変化なし、白はもうひとつの色を反転）
exclusion difference よりコントラストが低い
hue 上の色相、下の彩度と明度
saturation 上の彩度、下の色相と明度
color 上の色相と彩度、下の明度（前景に色をつける）
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);
}

アスペクト比ベースのメディアクエリ

/* 縦長のデバイス（例：スマートフォンの縦向き）用のスタイル */
@media (max-aspect-ratio: 3/4) {
    /* 縦長のデバイスの場合のスタイルをここに追加 */
}

/* 横長のデバイス（例：PCやタブレットの横向き）用のスタイル */
@media (min-aspect-ratio: 4/3) {
    /* 横長のデバイスの場合のスタイルをここに追加 */
}

メディアクエリ

ダークモードに対応している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は縦方向　それぞれにstartとend
widthはinline-size・heightはblock-size
縦書きの言語
inlineは縦方向・blockは横方向　それぞれにstartとend
widthはblock-size・heightはinline-size

例：margin-inline（Safari14.1から）
margin-inline: auto;で中央寄せ