何も知らないけどまずはChromewhat's new pageレイアウトを分析

5585 ワード

タイトルは壮大に書かれていますが.
Chromeを開くと、更新紹介ページが表示されます.
ちょっと見たいのですが、簡単な感想を書きたいだけです!

ページ幅が1024 pxを超えると形状が変わります.
サイズが大きくなるアイコンも大きくなる

これはページ全体の様子です.
body内はdivセレクタとfooterで大文字です.
.mainという名前の正しいクラス名はclass=「chr-mainchr-main--no-header」
タイトルがないのでNo-タイトルと言いますか?
(頭が見つかるのを恐れて教えてくれた温もりコード…?)
2回のハイフンは区別の意味ですか?
一部はKebobスタイルで、もう一部はsnakeスタイルで、クラス名と命名されています.
会社のコード会議を探さなければなりません.

かわいいのは一番上のこの部分のclass名前はsnackbar!
Snakbarは立っておやつを食べる場所です

通常は、下端から上記のメッセージを発信する際に使用される.
「chromeは最新の状態」って言ってるみたいでsnackbar私もつけます!

<div class="snackbar" data-comp="Snackbar"
      data-props-snackbar='{"dynamicClass": "bottom" }'
>
    <div class="snackbar__card">
      
          <svg class="snackbar__icon"  aria-hidden="true" >
            <title></title>
            <use xlink:href="#green-check"></use>
            </svg><p class="chr-headline-6 snackbar__description">
        Chrome이 최신 상태입니다.</p>
    </div>
  </div>