我在使用Svelte時遇到了一個需求，需要在元素上動態應用一些CSS屬性，當其中一個變量具有特定的值時。 我找到的最簡單的解決方案是在selected變量值為true時添加一個HTML類，然後我寫了一些針對具有該類的元素的CSS： <style> /\* ...其他CSS... \*/ span.cell.selected { outline-color: lightblue; outline-style: dotted; } </style> <span class="cell {selected === true ? 'selected' : ''}"> {value} </span> 這種需求是如此常見，以至於Svelte添加了將類名綁定到變量值的功能： <span class="cell" class:selected="{selected}"> {value} </span> 更簡潔的方式是使用簡寫符號： <span class="cell" class:selected> {value} </span>
假設你已經設定好了使用Tailwind CSS的應用程式，你將擁有一個包含以下內容的CSS檔案： @tailwind base; @tailwind components; @tailwind utilities; 你可以前往Google Fonts網站，選擇一個字體，並且會提供你一個用於匯入該字體的CSS @import。 舉個例子，如果你選擇了Inter字體以及各種字重，將會獲得以下的@import語句： @import url('https://fonts.googleapis.com/css2?family=Inter:[[email protected]](/cdn-cgi/l/email-protection);200;300;400;500;700;900&display=swap'); 將這段語句加入到CSS檔案中，並且再加上以下內容： @layer base { html { font-family: Inter, system-ui, sans-serif; } } 最終，你的CSS檔案會變成這樣： @tailwind base; @tailwind components; @tailwind utilities; @import url('https://fonts.googleapis.com/css2?family=Inter:[[email protected]](/cdn-cgi/l/email-protection);200;300;400;500;700;900&display=swap'); @layer base { html { font-family: Inter, system-ui, sans-serif; } } 現在你的預設字體就是Inter字體了，你可以使用font-bold或者font-medium來設置不同大小的字體。
我使用以下幾行CSS代碼來為我的網站應用暗黑模式： @media (prefers-color-scheme: dark) { body { filter: invert(100%); background-color: rgb(29, 32, 31) !important; } img, .astro-code, .emoji, iframe /* for recaptcha */ { filter: invert(100%) !important; } } 看起來非常好！
Web 平台是一個令人驚嘆的 API、工具和語言的生態系統，如今比以往任何時候都更加強大。通過我的路線圖，通過簡單的教程學習 Web 平台。 Web 平台是一個令人驚嘆的 API、工具、語言的生態系統，如今比以往任何時候都更加強大。 在這個博客上，我寫了很多與 Web 平台相關的教程和文章。 本文旨在將它們組織起來，讓您可以更輕松地找到它們，並作為學習如何在 Web 平台上進行開發的路線圖。 瀏覽器 API 指南 首先深入研究 DOM，這是瀏覽器提供的最基本的 API。一旦熟悉了這個，可以查看與瀏覽器相關的其他重要 API。 DOM Selectors API XHR API Fetch API Channel Messaging API Cache API Service Workers Progressive Web Apps History API Push API Notifications API Console API CORS Web Workers requestAnimationFrame WebSockets WebRTC Speech Synthesis API SVG，一個令人驚嘆的圖像格式 學習 SVG 存儲 API Web 平台提供了 3 個基本的存儲 API：cookies、Web Storage 和 IndexedDB。瞭解它們的優點和缺點： IndexedDB Cookies Web Storage Web 開發者工具 如果沒有所提供的令人驚奇的瀏覽器開發者工具，我們開發者會完全迷失和恐懼。...
動畫是一個迷人的主題。無論您想要添加互動動畫，如過渡效果，還是構建整個全屏體驗，您都擁有所有所需的工具。 動畫是一個迷人的主題。無論您想要添加互動動畫，如過渡效果，還是構建整個全屏體驗，您都擁有所有所需的工具。 而且，您有很多不同且具有不同目的的選擇。 CSS 通常被認為更加高效，儘管 JavaScript 也可以非常高效。一切取決於您需要做什麼，以及每幀渲染所需的時間。 CSS 過渡效果 CSS 動畫 SVG 動畫 Canvas API 動畫 Web Animations API WebGL 讓我們總結這些選項，找出哪一種是合適的選擇。 CSS 過渡效果 CSS 過渡效果 有一個起點和終點。它們將一點從 X 移動到 Y，或從可見變為不可見。 它是最簡單的動畫，主要用於與頁面其餘部分無縫集成的微妙動畫。 通過過渡效果，您可以從一個狀態轉換到另一個狀態，但您無法做更多。 CSS 動畫 與 CSS 過渡效果相比，CSS 動畫 允許您具有不止 2 個狀態，事實上，您可以擁有很多狀態，並且可以用於創建更複雜的動畫。 當您需要相對簡單且無法使用過渡效果實現的動畫時，建議使用 CSS 動畫。 SVG 動畫 SVG 是一種出色的基於矢量的格式，可以使用 SMIL（SVG 動畫的"本地"格式）創建動畫。 由於存在跨瀏覽器的不一致性（並且 IE/Edge 不支援），SMIL 快將在 Chrome 中廢棄，但是團隊已暫時撤銷了此決定。 他們希望推動 CSS 動畫和 Web Animations API 來代替 SMIL。 Canvas API 動畫 Canvas API 提供了一種在屏幕上繪製的方法，使用的是點陣而不是向量。 儘管動畫是可能的，但不如其他選項高效。...
瀏覽器開發工具是前端開發者工具箱中的基本元素，並且在所有現代瀏覽器中都可用。了解它們對您有什麼幫助的基礎知識。 瀏覽器開發工具 HTML結構和CSS HTML面板 CSS樣式面板 控制台 執行自定義JavaScript 錯誤報告 模擬器 網絡面板 JavaScript調試器 應用程序和存儲 存儲 應用程序 安全選項卡 審計 瀏覽器開發工具 我認為網站和 Web 應用程序的建構從來都不是一個容易的任務，就像後端技術那樣，但是總的來說，客戶端開發相對較容易。 一旦你弄清楚了 Internet Explorer 和 Netscape Navigator 之間的差異，並避免了專屬的標籤和技術，你所需要使用的只有 HTML，稍後是 CSS。 JavaScript 是一種用於創建對話框等功能的技術，但絕對不像今天這樣普及。 雖然許多網頁仍然是純 HTML+CSS 的形式，就像這個頁面一樣，但是許多其他網站則是在瀏覽器中運行的真正應用程序。 僅僅提供網頁的源代碼，像瀏覽器一樣過去一樣的那樣，是不夠的。 瀏覽器需要提供關於它們如何呈現頁面以及頁面當前正在做什麼的更多信息，因此它們引入了一個用於開發人員的功能：它們的開發人員工具。 每個瀏覽器都不同，所以它們的開發人員工具也略有不同。在撰寫本文時，我最喜歡的開發人員工具是由 Chrome 提供的，這也是我們在這裡討論的瀏覽器，儘管 Firefox 和 Edge 也有很好的工具。 HTML結構和CSS 最基本和常見的用法是檢查網頁的內容。打開開發人員工具時，你會看到的是元素面板： HTML面板 在左側是組成頁面的HTML。 在HTML面板上將鼠標懸停在元素上會突顯該元素在頁面中的位置，點擊工具欄中的第一個圖標可以點擊頁面中的元素並在檢查器中進行分析。 您可以將元素拖放到檢查器中，即時更改它們在頁面中的位置。 CSS樣式面板 在右側是應用於當前選中元素的CSS樣式。 除了編輯和禁用屬性之外，您可以通過點擊“+”圖標添加新的CSS屬性，並為所需的任何目標添加。 您還可以觸發選定元素的狀態，以便在活動、懸停或焦點時查看應用的樣式。 在底部，選中元素的框模型可以讓您快速查看邊距、填充、邊框和尺寸: 控制台 開發工具的第二個最重要的元素是控制台。 可以單獨查看控制台面板，也可以在元素面板中按下 Esc 鍵，它將顯示在底部。 控制台主要有兩個用途：執行自定義JavaScript 和錯誤報告。 執行自定義JavaScript 在控制台底部有一個閃爍的光標。您可以在這裡輸入任何JavaScript，它將立即執行。例如，嘗試運行： alert('test') 特殊標識符 $0允許您引用當前在元素檢查器中選中的元素。如果要將其作為 jQuery 選擇器引用，請使用 $($0)。 您可以使用 shift-enter 來編寫多行。在腳本的末尾按 enter 鍵運行它。...
有許多在線工具可以幫助您 lint 或格式化程式碼。本文列出了一些對 HTML、CSS 和 JavaScript 最有用的工具。 改進您的JavaScript程式碼的流行專案的官方在線版本 Prettier（格式化程式碼） https://prettier.io/playground/ ESLint（程式碼檢查工具） https://eslint.org/demo JSHint （程式碼檢查工具） http://jshint.com/ 其他語言的工具 CSS http://www.codebeautifier.com/ HTML http://htmlformatter.com/ JSON https://jsonformatter.curiousconcept.com/ https://jsonformatter.org/ GraphQL http://toolbox.sangria-graphql.org/format 通用工具（能處理不止一種語法） https://ctrlq.org/beautifier/
我已經在這個博客上寫了很長一段時間了。在這段時間裡，我涵蓋了許多不同的主題。 回顧往事，我從一些隨機的 Web 開發主題開始，然後專注於 Go、React、Node.js、CSS、HTML、瀏覽器 APIs、Next.js、Vue.js、Svelte、數據庫、Python、Swift，甚至電子學和 C 語言。 有時候，當我有希望寫一些與我通常所寫的主題不同的內容時，我會考慮一下。 這是我的博客，它不是一本名為“Web 開發”或其他類似的出版物。 儘管如此，當你長時間寫關於一個主題時，即使是像我這樣涵蓋了廣泛範圍的主題，你也會開始覺得自己與讀者之間有一個“合約”。 如果我決定寫關於 X 的內容而讀者對此不感興趣，會發生什麼事呢？他們會停止閱讀或關注這個博客嗎？他們會取消訂閱郵件通訊嗎？ 除非你完全偏離了主題，否則幾乎從不會有這種情況。 你讀到了上面的主題列表嗎？它們之間幾乎沒有什麼相關性，除了它們都與編程有關。但是一位 React 開發者對於 C 語言或 CSS 沒有興趣。 因此，廣泛的專業領域是編程，在這個領域下我可以寫關於任何事情。 如果我開始寫關於園藝、狗、或者徒步旅行之類的內容，那就不一樣了。 有時候我會談論商業方面的事情，或者內容的製作，但這些都是相關的。 我考慮過在旅行時寫一些類似“旅遊博客”的帖子，只是為了做些不同的事情。也許有一天我會寫，儘管我不想讓讀者困惑。還有 Google 啊哈哈。 對我來說，規則是寫我想寫的內容。每天寫一篇帖子是關鍵。否則我早就停下來了。如果有一天我想寫關於旅行、烹飪或其他任何事情的內容，我就會去寫。 有時候我寫一篇關於如何為數字遊牧在整個歐洲旅行期間設置我的面包車的帖子，說實話，關於這些主題我獲得了更多的回覆。也許只是因為在他們那個時代這有些不尋常。 我將來要做的一件事是開始寫關於 SwiftUI 和 iOS 開發的內容。我已經考慮了好幾個月了。其實，我想已經有幾年了。 但現在我覺得是合適的時候了。 過去，我決定寫一些我不是非常熱衷的主題，比如數據庫。我對數據庫有多少熱情呢？我開始寫了幾天後就停下來了。 但我想，我可以寫一些我對於 iOS 應用的想法，計劃階段，開發過程，上架 App Store，等等的內容，這可能是我的一部分讀者非常感興趣的內容。 也許他們也有一個 iOS 應用的想法，這可能會是他們開始的觸發點。 我是否對 Web 開發厭倦了？絕對不是。而且任何 iOS 應用也需要與 Web 或 API 相應的對應組件，所以這不意味著我會停止寫關於它的內容。 而且我喜歡 JavaScript。 我只是喜歡編程。用代碼創造事物。不管是 Web 應用、iOS 應用還是桌面應用，都無關緊要。 對我來說，改變一下我寫關於什麼的方式只是為了多元化並保持我的能量水平高。 對我來說一直都是這樣。我會工作在一個 Web 應用上，然後轉到 iOS 應用，然後再轉到 macOS 開發，然後再回到 Web 應用。...
JSX是React引入的一個技術。讓我們深入了解一下。 JSX簡介 JSX入門 轉譯JSX JS in JSX 在JSX中使用HTML 您需要關閉所有標籤 駱駝命名法是新的標準 class變成className style屬性改變其語義 表單 React中的CSS 為什麼這比純CSS / SASS / LESS更受青睞？ 這是首選解決方案嗎？ JSX中的表單 value屬性和defaultValue屬性 更一致的onChange事件 JSX自動轉義 JSX中的空格 水平空格被修剪為1個 垂直空格被消除 在JSX中添加註釋 擴展屬性 如何在JSX中進行循環 JSX簡介 JSX是由React引入的一項技術。 儘管React在不使用JSX的情況下也可以正常工作，但它是與組件一起工作的理想技術，因此React從JSX中獲益良多。 起初，您可能會認為使用JSX就像混合HTML和JavaScript（以及CSS）。 但事實並非如此，因為使用JSX語法時，實際上是用JavaScript編寫一個組件UI的聲明語法。 您使用的不是字符串描述UI，而是使用JavaScript，這使您能夠做許多好事。 JSX入門 以下是如何定義包含字符串的h1標籤的示例： const element = <h1>Hello, world!</h1> 它看起來像JavaScript和HTML的奇怪混合，但實際上它是完全的JavaScript。 看起來像HTML，實際上是為了定義組件以及它們在標記中的定位而添加的語法糖。 在JSX表達式中，可以非常容易地插入屬性： const myId = 'test' const element = <h1 id={myId}>Hello, world!</h1> 只需注意，當屬性具有連字符（-）時，它會轉換為駝峰命名法。還有兩種特殊情況： class變成className for變成htmlFor 這是因為它們是JavaScript中的保留字。 以下是一個將兩個組件包裝到div標籤中的JSX片段的示例： <div> <BlogPostsList /> <Sidebar /> </div> 標籤始終需要關閉，因為這更像是XML而不是HTML（如果您還記得XHTML的日子，這將是熟悉的，但此後採用了HTML5鬆散語法）。在這種情況下，使用了自閉標籤。 請注意，我將2個組件包裝到div中。為什麼？因為**render()函數只能返回單個節點**，所以如果您要返回2個兄弟節點，只需添加一個父節點。它可以是任何標籤，不僅僅是div。 轉譯JSX 瀏覽器無法執行包含JSX代碼的JavaScript文件。它們必須首先轉換為常規JS。...