不完全なチュートリアル コレクションのリファクタリング 2_html/css_WEB-ITnose

つまり、高い山に登らなければ、空の高さはわかりませんし、深い川に行かなければ、その深さはわかりません。地球は。 --「学習の奨励」より抜粋

::before & ::after

さらに 2 つの空白タグに相当し、装飾的な装飾やコンテンツなどを配置できます。

• css3 で生成されたコンテンツ
• 疑似要素でできる素晴らしいことの数々

フォント

フォントには主に次のものが含まれます。フォントのレンダリング方法、ブラウザのデフォルトフォントとリセット、@font-faceカスタムフォント、フォントのパフォーマンスなど

• フォントレンダリングの裏話
• フォントレンダリング
• カスタム フォントの詳細説明 @font-face
• モバイル フォント
• アイコンのカスタマイズに関する簡単な説明
• google fonts
• icomoon

写真

一般に、写真の使用は背景と画像に分けられ、最適化の観点からリクエストの削減とサイズの削減に分けられます。

画像最適化の原則:

1. 使用できない場合は使用しないでください (単純なグラフィックを描画するには css3 を使用するなど)
2. 選択ベクター画像とビットマップの
3. 適切な画像形式 (gif、png、jpg、webp など) を選択し、さまざまな仕様 (さまざまなサイズまたは Retina スクリーン) を準備します
4. マージ (スプライト) と圧縮(不可逆圧縮と可逆圧縮)

リソースリンク:

• 画像の遅延読み込みの実装
• CSS グラデーション
• CSS スプライト
• 画像の最適化 - Google 画像最適化マニュアル
• ベースラインとプログレッシブ
• 画像の原則と最適化
• WebP 探索パス
• ウェブ パフォーマンスの最適化: 画像の最適化

svg

現在、svg の最大の用途はアイコンとアニメーションであり、最大の利点はベクター グラフィックスを歪みなく任意に拡大縮小できることです。比較的小さい。

• svg の互換性
• svg 作成ポケットガイド
• MDN svg チュートリアル
• SVG のビューポート、viewBox、preserveAspectRatio を理解する
• SVG スプライト テクノロジの紹介
• アイコンに適した SVG シンボル
• js と互換性のある svg スプライト
• svg ライン アニメーション
• 超強力な SVG SMIL アニメーション 詳細アニメーションの説明
• 素晴らしい svg

css3 アニメーション

はトランジションアニメーションとアニメーションアニメーションに分かれています。 前者は 2 フレームのアニメーションです (制御できるのは 2 フレームのみです)。 start と end)、後者のその他の処理はどのフレームでも実行できます。

• CSS 3D 変換の概要
• CSS3 トランジション 101
• CSS3 アニメーション 101
• CSS3: アニメーションとトランジション
• css3 アニメーションの難しさ
• 高性能アニメーション
• css トリガー

アニメーション ライブラリ

• animate.css
• 効果
• hover.css
• アニメーション可能
• css3 マジック アニメーション

レスポンシブ

レスポンシブには主にブレークポイントの設定とスタイルの変更が含まれますさまざまなブレークポイント条件下で

• MDN CSS メディア クエリ
• 応答性とブレークポイント設定の分析を開始します
• レスポンシブ画像処理
• メディア クエリ: 幅vs. デバイス幅
• メディア クエリ リソース
• ケース リファレンス

ie8 が必要な場合は、対応する式もサポートしており、応答などの JS ライブラリの互換性を導入します。 js (ie8 はレスポンシブにすることはお勧めしません)

リフローと再描画

• Web ページのパフォーマンス管理の詳細な説明
• リフローを最小限に抑えてパフォーマンスを向上させる 10 の方法

クラスの名前付け

• クラスの名前の付け方
• BEM
• CCSS
• ACSS
• SMACSS
• オブジェクト指向 CSS (OOCSS) の概要

注: このシリーズは、github 上の優れた再構築チュートリアルのコレクションにまとめられます