なんかいろいろ変わりましたね。

コーディングするときには気にしてつくろう。

昨日のことも忘れちゃうので健忘メモ。

 

 

---

そういえば。html5 から html living standard になったよ

2021年1月の、とある昼下がり。

html5が廃止になったというニュースが飛び込んできました。ファッ？！廃止？！

 

とっても参考になった記事。

 

「廃止」なんていうからhtml5がなくなっちゃったのかと思ってびっくりしましたが、「h1」はsectionに対して1つなの？ページに対して1つだけなの？みたいな、これまで解釈の違いで人によって答えが違ってたこと、曖昧だった点がはっきりした印象。

 

それから画像の読み込み遅延。
imgタグで呼び出す画像ファイル、ひとつのhtmlファイルに含まれるもの全て同時に読み込まれます。こういうちょっとした無駄をなくすのが「loading="lazy"」。

ブラウザの画面領域にある画像だけロード、外にある画像はロードしないって言う処理。js で実装していたのですが、imgタグでできるようになりました。

2年前から使ってたけど・・正式じゃなかったんかーい。

 

組織が変わって利便性重視に。今後は交通整理がきちんとされるってことなのかもしれないね、と前向きに捉えています。

 

---

IEさんさようなら。いままでお世話になりました。

そして、2022年6月15日。とうとうこの日がやってきた。IEのサポート終了です。IEのことを気にしなくて良くなりました。

 

どれだけ気にしていたかというと・・

例えば正方形のサムネイル。こういうのです。

 

このサムネイル部分、CMSから投稿した元画像は長方形で、出力後にcssで正方形にトリミング。

画像をbackgroundにしなくとも、imgに対して css の object-fit：cover を使うことで、縦横小さな方に合わせてはみ出た部分をトリミングし、比率を維持してくれるという。魔法の一行、便利だね〜！

しかしIEには効きません。jsを使いました。

 

 

そうそう。パララックスが流行って。

複数のレイヤーを違うスピードで動かすってやつです。使ってるサイト、多いですよね。

そんな、当たり前のように使ってるパララックスをIEで見たときに・・

全然スムーズに動かない。カクカクして動きがおかしい。

IEは「マウスを回転すると1行ずつ画面をスクロールさせる」という謎機能がデフォルトでONになってるのが原因。なんだそれ。誰がなんのためにつけたんじゃ。

jsで無効にしてやりました。無理矢理すぎて草です。

 

 

IEさん。わたしたちは、あなたのためだけにいろんなことしてたんだよ。そんないろいろも、今となっては良い思い出だね。

さよならIE。

 

 

 

---

余談：IE と jQuery

改めて振り返ってみると、挙動がおかしい、cssが効かない。これをjsでねじ伏せていた感がありますが・・

 

GoogleChromeが生まれる前、IEのシェアがトップだった時代に生まれたのがjQuery。

ブラウザ毎にJSの解釈が違ってしまってて、こちらでは動くけどあちらでは動かない。

これを解決したのがjQueryなんだそう。jQuery作った人、すごいね。

 

時代の流れというか盛者必衰というか。

いまは、ほぼすべてをJavaScriptで書いちゃう React さんとか Angular さんとか、Vue.js さん。

コーディングの手間が減るとか、ルールがあって人による記述の違いが減るとか、開発のしやすさから人気ですが・・

 

気になってたのはパフォーマンスの違い。

詳しく解説されている記事発見。

 

 

流行ってるからフレームワーク使う！SPA設計にする！ではなく、ニーズや状況、ユーザー目線での技術のチョイスっていうのが大事なのかもしれません。

勉強になりました。

 

---

さて。早速使ってみた。並べるレイアウトの「gap」

flexの並べるレイアウトです。flexだと簡単！

でも余白の調整がめんどくさーい。

 

justify-content: space-between を使うとスペースが均一になるのでmargin等の調整は不要。

ですが、動的にしたときが問題で。

例えば３カラムのレイアウトで、出力した結果が2つだったときや4つだったとき。３の倍数以外だと崩れちゃうので・・

 

こんな感じでマークアップしたとして

 

<div class="list-3col">
 <ul>
  <li>1個目</li>
  <li>2個目</li>
  <li>3個目、次改行するよ</li>
  <li>4個目</li>
  <li>5個目</li>
  <li>6個目、次改行するよ</li>
  <li>7個目</li>
 </ul>
</div>

 

cssは、いつもはこんな感じ。

 

.list-3col ul {
 display: flex;
 flex-wrap: wrap;
 margin: 0 auto;
}
.list-3col li {
  width: calc(33% - (40px * 2) / 3);
  margin-left: 40px;
  margin-top: 80px;
}
.list-3col li:nth-child(3n+1) {
  margin-left: 0;
}
.list-3col li:nth-child(-n+3) {
  margin-top: 0;
}

 

３つ並んだ要素間の左右の余白は40pxで、

li単体のwidthは、

幅100% ÷ 3 - (余白40px が２つ) ÷ 3

ってcalcで計算しています。

nth-child(3n+1)は、３の倍数 + 1。

４つ目、７つ目・・って一番左側に来るやつ。なので左のmarginはいらないから消す。

nth-child(-n+3) っていうのは上から３番目まで。

一番上に来るやつだから、トップのmarginを消しました。

ややこしや！

 

gapを使えばたった一行で全体の余白が調整できます。

 

.list-3col ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  gap: 80px 40px;
}
.list-3col li {
  width: calc(33% - (40px * 2) / 3);
}

 

簡単だね〜

 

とりあえずブログの一覧表示してるところだけ直してみました。

所要時間およそ10分。

 

---

 

IEがリタイアしたことで、css自体のコードの量も減らせるし、cssでできることはcssでやる！というふうにすれば JS の量も減るのは確かで、コンフリクトの心配も減るし、よかったよかった！

 

IEさん、いままでお世話になりました。