ホームページ > ウェブフロントエンド > CSSチュートリアル > CSSは強くタイプされた言語です

CSSは強くタイプされた言語です

Jennifer Aniston
リリース: 2025-03-25 09:37:11
オリジナル
603 人が閲覧しました

CSSは強くタイプされた言語です

プログラミング言語を分類する方法の1つは、それがどれほど強くまたは弱く入力されているかによってです。ここで、「タイプされた」とは、変数がコンパイル時に既知の場合を意味します。この例は、整数(1)が整数( "1")を含む文字列に追加されるシナリオです。

結果= 1 "1";
ログイン後にコピー

整数を含む文字列は、多くの可動部品を備えた複雑なロジックスイートから意図せずに生成された可能性があります。また、単一の真実の源から意図的に生成された可能性があります。

「弱い」および「強い」という用語は意味するという意味にもかかわらず、強く型のプログラミング言語は、必ずしも弱いタイプのものよりも優れているわけではありません。柔軟性が剛性よりも必要なシナリオがあり、その逆もあるかもしれません。プログラミングの多くの側面と同様に、答えは複数の外部コンテキストに依存します(つまり、「依存」)。

もう1つの興味深いビットは、強いまたは弱いタイピングを構成するものの正式な定義がないことです。これは、強くまたは弱い型の言語と見なされるものの認識が人によって異なり、時間とともに変化する可能性があることを意味します。

タイプスクリプト

JavaScriptは弱いタイプの言語と見なされており、この柔軟性はWebでの早期採用に貢献しました。ただし、Webが成熟し、工業化されるにつれて、JavaScriptのユースケースはより複雑になりました。

TypeScriptのような拡張機能は、これを支援するために作成されました。それは、言語に強いタイピングを接ぎ木するJavaScriptの「プラグイン」と考えてください。これにより、プログラマーは複雑なセットアップをナビゲートするのに役立ちます。この例は、eコマースに使用されるデータ集約型シングルページアプリケーションです。

TypeScriptは現在、Web開発業界で非常に人気があり、多くの新しいプロジェクトが最初に物事を設定するときにTypeScriptを使用することを義務付けています。

コンパイル時間

コンパイル時間は、プログラミング言語がマシンコードに変換される瞬間です。これは、マシンコードがコンピューターによって実行される瞬間であるランタイムの前駆体です。

ウェブ上の多くのことと同様に、コンパイル時間は少し難しいです。 TypeScriptを使用するセットアップにより、JavaScriptコードのコンポーネントピースを縫い合わせて、ブラウザが読み取りおよび実行できるように1つのJavaScriptファイルにコンポーネントをコンパイルします。

コンポーネントピースがコンパイルする時間は、それらがすべて結合されている場合です。 TypeScriptは一種の監督として機能し、組み合わせが発生する前に自分で設定したタイプされた慣習を破ろうとすると、あなたに怒鳴ります。

ステッチされたjavaScriptファイルは、独自のコンパイル時間があるブラウザによって摂取されます。ブラウザコンパイル時間は、次のことに応じて非常に変動します。

  • ブラウザがオンになっているデバイス、
  • ブラウザが行っている他の機能、そして
  • デバイスの他のプログラムが行っている他の機能。

タイプスクリプトはブラウザでは直接使用されませんが、その存在は感じられます。 JavaScriptは壊れやすいです。タイプスクリプトは、コードエディターの上流のエラーを防止しようとすることにより、この脆弱性を支援します。これにより、ブラウザが読んだJavaScriptで発生する可能性エラーが減少します。これにより、JavaScriptがWebサイトまたはWebアプリで使用されているWebアプリで機能するのを停止するエラーです。

CSS

CSSは、宣言的なドメイン固有のプログラミング言語です。また、強く入力されています。ほとんどの場合、CSSの値は著者と宣言されたままです。値が無効な場合、ブラウザはプロパティ全体を捨てます。

CSSのタイプ

CSSのタイプのリストは徹底的です。彼らです:

テキストタイプ
  • グローバルにスコープされたキーワード:
    • イニシャル
    • 継承
    • 解き放つ
    • 戻る
  • グリッドエリア名の提供など、物事に特に使用されるカスタム識別
  • 「こんにちは」などの文字列
  • https://css-tricks.com/などのURL
  • カスタムプロパティを作成するために使用される破壊されたアイデン( - )(これについては少し)
数値タイプ
  • 10〜9の小数点以下の整数
  • 3.14などの実数
  • 25%などの割合
  • 寸法、(100pxまたは3s)などのユニットが追加された数字
  • 16/9などの比率
  • フレックス、CSSグリッド計算の可変長
数量タイプ
  • 長さ:
    • ピクセルやセンチメートルなどの絶対長さ
    • ルートEMSやビューポートの高さなどの相対長さ
    • 200msなどの時間
  • 15DEGなどの角度
  • 250msなどの時間
  • 周波数、そのような16Hz
  • 96DPIなどの解像度

寸法と長さは似ているように見えるかもしれませんが、寸法にはパーセンテージが含まれ、長さはできません。

カラータイプ
  • キーワード:
    • パパヨーシップなどの名前の名前
    • 透明
    • CurrentColor
  • RGB色:
    • #ff8764などの16進表
    • RGBAなどのRGB/RGBA表記(105、221、174、0.5)
  • HSLなどのHSL/HSLA色(287、76%、50%)
  • Buttontextなどのシステムの色
画像タイプ
  • 画像、これは画像ファイルまたはグラデーションへのURL参照です
  • カラーストップリスト、勾配概念に使用される2つ以上のカラーストップのリスト
  • 線形色の止まり、勾配色の停止を示すために使用される色と長さの表現
  • 線形カラーヒント、色を補間するために使用される長さの割合
  • エンディングシェイプ、ラジアルグラデーションに円または楕円のキーワードを使用するか
2Dポジショニングタイプ
  • キーワード:
    • トップ
    • 中心
  • 25%などの長さの割合

CSSでのプログラミング

CSSのプログラミングの大部分は、セレクターを作成し、一連のプロパティとその必要な値を指定しています。セレクターのコレクションは、JavaScriptロジックのコレクションが機能を作成する方法と同様に、コンテンツに視覚的なフォームを提供します。

CSSには関数があります。計算、条件付き論理、アルゴリズム式、状態、およびモードベースの動作を実行できます。また、値を動的に更新できるようにするCSS変数であるカスタムプロパティもあります。ヘック、CSSでフィズバズを解決することもできます。

他のプログラミング言語と同様に、「メタ」レイヤーもあり、物事を整理、管理、維持する方法についてさまざまな考えやテクニックがあります。

スローエラー

コードが主にフードの下に存在する他のプログラミング言語とは異なり、CSSは非常に視覚的です。プロパティ宣言に無効な値を使用している場合、コンソールに警告やエラーが表示されませんが、予想方法を更新しないビジュアルが表示されます。

この理由は、CSSが回復力があるからです。誤解された宣言のためにビジュアルが更新されない場合、CSSは優先順位付けされており、コンテンツがすべてのコストで表示され、他のすべての有効な宣言を可能にすることができるようにします。これは、言語の設計原則、プラットフォームの原則、およびWebのミッションの包括的な目標に沿っています。

証拠

CSSのタイピングがGuardRailsを3つの例で維持する方法を示しましょう。1つは簡単なプロパティ/値宣言、計算、もう1つはカスタムプロパティを再定義するものです。

例1:簡単なプロパティ/値宣言

この例では、ブラウザはバナーのボーダースタイルの「ジャガイモ」宣言を理解していません。ボーダースタイルにはタイプの不一致があるにもかかわらず、他の.bannerクラスセレクターのプロパティ/値宣言はブラウザによって尊重され、レンダリングされていることに注意してください。これは、CSSの回復力のある例です。

国境スタイルの宣言は、次のテキストスタイルタイプのいずれかを期待しています。

  • グローバルにスコープされたキーワード、またはa
  • カスタムプロパティの破線のインデント。

ボーダースタイルを更新して、点線の有効で型付けの値を使用すると、ブラウザはボーダーをレンダリングします!

例2:計算

CSSのcalc()関数を使用すると、2つの引数と演算子を取得して計算結果を返すことができます。引数の1つが有効なタイプを使用しない場合、計算は機能しません。

このペンでは、Pセレクターのフォントサイズのプロパティは、数値寸法タイプ(1.5REMなど)の値を期待しています。ただし、計算関数は、フォントサイズのプロパティの無効なタイプ値を生成します。これは、calc()関数の2番目の引数が文字列( "2rem")であり、数値寸法タイプではないためです。

このため、パラグラフのフォントサイズは、次の最も適用可能な親ノードに戻ります。これは、ボディ要素で宣言された1.5レムのフォントサイズです。

これは雑草には少しですが、指摘する価値があります。Calc()関数に2つのカスタムプロパティを組み合わせると、エラーが発生する可能性があります。両方のカスタムプロパティはそれ自体で有効ですが、calc()は破線のインデントのテキストタイプを受け入れません。不一致ユニットを含むカスタムプロパティを掛けてみることを試みるシナリオを考えてみてください。

例3:再定義されたカスタムプロパティ

JavaScript変数と同様に、カスタムプロパティ値を再定義できます。この柔軟性により、ダークモードの色のテーマを簡単に作成できるようになります。

:このCodepenのルートセレクターでは、#953Fe3の値で、-color-cyanのカスタムプロパティを設定しました。次に、.Squareクラスでは、-color-cyanカスタムプロパティの値をトップに更新しました。 Topは有効で型付けの値ですが、背景色の栄誉が称賛されるタイプではありません。

更新されたカスタムプロパティは.squareにスコープされており、「タイプすることはない」というフレーズの右側の境界線など、他の使用法には影響しないことに注意してください。また、.squareから再定義されたカスタムプロパティを削除すると、シアンの背景色が戻ってきます。

これは少し不自然ですが、注意しないとカスタムプロパティを再定義することがあなたから逃れることができる方法の例として機能します。

この現象は、コミュニケーションが不十分なプロジェクト、より大きなCSSコードベース、およびCSSの前処理者が規模のカスタムプロパティを構築するために使用される状況で見つけることができます。

ツーリング

後知恵の贈り物で、CSSに対するコンソール警告の欠如は欠陥であり、言語に関する多くの否定的な認識に貢献していると思います。

開発者が潜在的に小さな視覚的変化があまりにも大きすぎることに気付くことを願っています。他のほとんどのツールのために彼らがどこであるかを彼らに会わないことを望んでいます。これに対処しようとしていることを知っているいくつかのイニシアチブがあります。

1つ目は、CSSおよびCSSのような前処理言語を扱うために特別に作られたリナーであるStylelintです。 Stylelintは、CSSを制御するのに役立つコードエディター、タスクランナー、コマンドラインツール、およびGitHubアクションと統合できます。これにより、開発者が既にある開発者に会うことができます。

2つ目は、開発者ツールのFirefoxの優れたCSS検査オプションのスイートです。特に、未使用のCSSを特定する能力に注意を喚起したいと思います。これは、タイプの不一致に違反した可能性のあるセレクターを識別するのに非常に役立ちます。

まとめます

CSSは、プログラミング言語である限り、強くタイプされており、プログラミング言語として長い間存在していました。また、最近多くの成長を遂げています。チェックインしていない場合は、いくつかの新しい驚くべき機能があります。

強く型のJavaScriptがより人気が高まるにつれて、開発者がCSSの企業でありながら柔軟なアプローチにより快適になるのを助けることが私の希望です。

フィードバックをしてくれたミリアム・スザンヌに感謝します。

以上がCSSは強くタイプされた言語ですの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート