CSS – Output48

dialogタグ、edgeやsafariで動作しない。からの修正案

dialogタグの代替案

HTML5で追加されたdialogタグ。

<dialog>: ダイアログ要素 – HTML: HyperText Markup Language | MDN
https://developer.mozilla.org/ja/docs/Web/HTML/Element/dialog

とても便利なタグではあるが、まだ主要ブラウザのedgeやsafariで動作しないのが難点である。

chromeなどの対応ブラウザのみで開発していた場合、気付かずにリリースしてしまうと対応で慌てることに。

その時にすぐに修正できるよう、dialogタグでの実装構造そのままの代替策をメモしておく。

safariでclickイベントが動かない？

safariで、一部クリックしても動作しない部分があった。

調べてみると、divタグやpタグでのclickイベントが動作していない模様。

対策までの一部始終をメモしておく。

WEBコーディング

プログラマから軽く見られがちなHTMLコーディング。
実はとっても大変な仕事で、スキルもプログラマ以上に必要となる。

プログラマは特にHTMLコーダーや、HTMLコーディング作業を軽く見る傾向があるが、実際やらせてみると全然できないことが多い。

正直、HTMLコーディングは、単一言語、単一プラットフォームでの開発が多いプログラム作業より、よっぽど高度で大変な作業だと思う。

これからHTMLコーディング作業に臨むプログラマがこの記事を見たら、HTMLコーディング作業を舐めずに取り掛かってほしい。

Google Chrome で発生する select のズレ

Google Chromeでだけ、selectの表示が若干ズレてたので、原因調べて直してみる。

画像をウィンドウサイズに合わせてリサイズするために、以下のcssを書いてみた。

img {
  width: 100%;
}

これだとウィンドウを徐々に小さくしていくと、画像がはみ出ることがある。
ロード時の100%固定で表示されるっぽい動き。

以下のcssで出来た。
いつもど忘れしてしまうので、忘れないようにメモ。

img {
  width: 100%;
  max-width: 100%;
}