CSS是一種強烈打字的語言

您可以對編程語言進行分類的方式之一是它的鍵入程度或弱鍵入。在這裡，“鍵入”意味著是否在編譯時已知變量。一個例子是一個場景，將整數（1）添加到包含整數（“ 1”）的字符串：

結果= 1“ 1”;

包含整數的弦本可以是由帶有許多運動部件的複雜邏輯套件無意間生成的。它也可能是從單一的真理來源產生的。

儘管術語“弱”和“強”的含義都意味著，但強大的編程語言並不一定比弱型的編程語言更好。在某些情況下，需要靈活性的不僅僅是剛性，反之亦然。與編程的許多方面一樣，答案取決於多個外部上下文（即“取決於”）。

另一個有趣的一點是，沒有正式的定義是什麼構成強或弱打字。這意味著對被認為強烈或弱的語言的看法因人而異，並且可能會隨著時間的流逝而改變。

打字稿

JavaScript被認為是一種弱化的語言，這種靈活性有助於其在網絡上的早期採用。但是，隨著網絡的成熟和工業化，JavaScript的用例變得更加複雜。

創建了諸如TypeScript之類的擴展名來幫助解決此問題。將其視為JavaScript的“插件”，它可以將強大的鍵入在語言上輸入。這可以幫助程序員瀏覽複雜的設置。一個例子可能是用於電子商務的數據密集型單頁應用程序。

當前，Typescript在網絡開發行業中非常受歡迎，並且在首次設置內容時使用Typescript的許多新項目默認。

編譯時間

編譯時間是將編程語言轉換為機器代碼的時刻。它是運行時的先驅，即計算機執行機器代碼的那一刻。

與網絡上的許多內容一樣，編譯時間有些棘手。利用TypeScript的設置將將JavaScript代碼組件的組件拼湊在一起，並將它們編譯為單個JavaScript文件，以供瀏覽器讀取和運行。

組件編譯的時間是將它們全部組合在一起的時間。 TypeScript是一種監督者，如果您嘗試打破在組合之前為自己設置的打字慣例，將對您大喊大叫。

然後，瀏覽器攝入了縫合的JavaScript文件，該文件具有自己的編譯時間。瀏覽器編譯時間的變化很大，具體取決於以下方式：

• 瀏覽器正在打開的設備，
• 瀏覽器正在做什麼，以及
• 設備其他程序正在做的其他工作。

瀏覽器並非直接使用打字稿，但感覺到它的存在。 JavaScript很脆弱。 Typescript試圖防止代碼編輯器上游的錯誤來幫助這種脆弱性。這減少了瀏覽器讀取的JavaScript讀取的機會錯誤 - 這會導致JavaScript停止在網站或一個人使用的Web應用程序上運行的錯誤。

CSS

CSS是一種聲明性的，特定領域的編程語言。它也被強烈鍵入。在大多數情況下，CSS中的值如撰寫所述。如果一個值無效，則瀏覽器將整個屬性丟棄。

CSS中的類型

CSS中的類型清單是詳盡的。他們是：

文本類型

• 全球範圍的關鍵字：
  • 最初的
  • 繼承
  • 不設置
  • 恢復
• 自定義標識是專門用於事物的，例如提供網格區域名稱
• 字符串，例如“你好”
• URL，例如https://css-tricks.com/
• 虛假（ - ），用於創建自定義屬性（更多地詳細介紹）

數字類型

• 整數，十進制數為0-9
• 實際數字，例如3.14
• 百分比，例如25％
• 尺寸，一個帶有單元的數字，例如（100px或3s）
• 比率，例如16/9
• Flex，CSS網格計算的可變長度

數量類型

• 長度：
  • 絕對長度，例如像素或厘米
  • 相對長度，例如root EMS或視口高
  • 時間，例如200ms
• 角度，例如15度
• 時間，例如250ms
• 頻率，這樣的16Hz
• 分辨率，例如96DPI

尺寸和長度似乎相似，但是尺寸可以包含百分比和長度不能。

顏色類型

• 關鍵字：
  • 命名顏色，例如木瓜
  • 透明的
  • CurrentColor
• RGB顏色：
  • 己二烯符號，例如＃ff8764
  • RGB/RGBA符號，例如RGBA（105，221，174，0.5）
• HSL/HSLA顏色，例如HSL（287，76％，50％）
• 系統顏色，例如buttontext

圖像類型

• 圖像，是對圖像文件或梯度的URL引用
• 顏色停靠列表，兩個或兩個以上的顏色停止列表，用於梯度概念
• 線性色 - 顏色和長度表達式用於指示梯度顏色停止
• 線性色暗，用於插值顏色的長度百分比
• 結束形狀，使用圓形或橢圓形的關鍵字作為徑向梯度

2D定位類型

• 關鍵字：
  • 頂部
  • 正確的
  • 底部
  • 左邊
  • 中心
• 一個百分比，例如25％

CSS編程

CSS中的大部分編程是創作選擇器，然後指定一套屬性及其必要值。選擇器的集合為內容提供了視覺形式，就像JavaScript邏輯的集合如何創建功能一樣。

CSS具有功能。它可以執行計算，條件邏輯，算法表達式，狀態和基於模式的行為。它還具有自定義屬性，這些屬性實際上是CSS變量，可以動態更新值。哎呀，您甚至可以用CSS解決FizzBu​​zz。

像其他編程語言一樣，也有一個“元”層，對如何組織，管理和維護事物具有不同的思想和技術。

投擲錯誤

與其他編碼在很大程度上存在於引擎蓋下的編程語言不同，CSS具有很高的視覺效果。如果您對屬性聲明使用無效的值，則不會在控制台中看到警告或錯誤，但是您將獲得不會更新預期方式的視覺效果。

原因是CSS具有彈性。當視覺效果因聲明誤解而沒有更新時，CSS正在優先考慮，確保可以不惜一切代價顯示內容，並將呈現其他所有有效的聲明。這符合語言的設計原則，平台的原則以及網絡使命的總體目標。

證明

讓我們演示在CSS中的強大鍵入在三個示例中保持護欄：一個具有直接的屬性/值聲明，一個具有計算的範圍，一個具有重新定義自定義屬性。

示例1：直接屬性/價值聲明

在此示例中，瀏覽器不了解橫幅的邊界“馬鈴薯”聲明。請注意，即使邊界風格的類型不匹配，瀏覽器的另一個.banner類Selector屬性/價值聲明也會受到瀏覽器的榮譽並呈現。這是CSS彈性的一個示例。

邊境風格的聲明期望以下文本樣式類型之一：

• 全球範圍的關鍵字，或
• 縮進了一個自定義屬性。

如果我們更新邊界風格以使用有效的，鍵入的點點，則瀏覽器將渲染邊框！

示例2：計算

CSS中的calc（）函數使我們能夠採用兩個參數和一個操作員來返回計算的結果。如果其中一個參數不使用有效類型，則計算將無法使用。

在這支筆中，P Selector的字體大小屬性期望具有數字維度類型（例如1.5REM）的值。但是，計算函數會為字體大小屬性產生無效的類型值。這是因為Calc（）函數中的第二個參數是字符串（“ 2REM”），而不是數字維度類型。

因此，段落的字體大小落回到下一個最適用的父節點 - 字體大小為1.5rem在身體元素上聲明。

這有點在雜草中，但值得指出：在calc（）函數中結合兩個自定義屬性會導致錯誤。雖然這兩個自定義屬性都可以自行有效，但Calc（）將不接受虛假的縮進文本類型。想想一個場景，我們可能會嘗試嘗試將包含不匹配單元的自定義屬性乘以 - 例如：500px和-small：1em。

示例3：重新定義自定義屬性

像JavaScript變量一樣，可以重新定義自定義屬性值。這種靈活性允許易於創建深色模式顏色主題之類的東西。

在此編碼器的根選擇器中，我設置了一個自定義屬性 - 彩色 - 彩色，值為＃953fe3。然後，在.square類中，我更新了 - 彩色cyan自定義屬性的價值，以成為頂級。雖然TOP是有效的，打字的值，但它不是背景色榮譽的類型。

請注意，更新的自定義屬性範圍為.square，並且不會影響其他用法，例如“不播放鍵入”一詞上的右側邊框。而且，如果您從.square中刪除重新定義的自定義屬性，您將看到CYAN背景顏色回到中。

儘管這有點人為，但它是一個例子，說明如果您不小心，重新定義自定義屬性如何擺脫您。

可以在通信較差的項目，較大的CSS代碼庫以及CSS預處理器用於大規模構建自定義屬性的情況下找到這種現象。

工具

憑藉事後看來，我認為缺乏對CSS的控制台警告是一個缺陷，並且對該語言產生了許多負面看法。

希望開發人員會注意到，潛在的視覺變化可能太大了，並且不會滿足他們在其他大多數日常工具的位置。我知道有一些計劃試圖解決這個問題。

首先是Stylelint，這是一種專門用於處理CSS和類似CSS的預處理語言的襯裡。 Stylelint可以與代碼編輯器，任務跑步者，命令行工具和GitHub操作集成，以幫助您控制CSS。這使其可以與開發人員見面。

其次是Firefox在其開發人員工具中出色的CSS檢查選項套件。特別是，我想引起人們對識別未使用CSS的能力的關注。這對於識別可能與類型不匹配的選擇器非常有用。

總結

只要它一直是一種編程語言，CSS就已經強烈鍵入，並且作為一種編程語言，它已經存在了很長時間。最近，它也已經成長了很多。如果您尚未簽入，將有一些新的，令人驚嘆的功能。

隨著強大的JavaScript變得越來越流行，我希望它可以幫助開發人員對CSS的公司而靈活的方法更加滿意。

感謝Miriam Suzanne的反饋。

以上是CSS是一種強烈打字的語言的詳細內容。更多資訊請關注PHP中文網其他相關文章！