Search for a command to run...
Chief Designer @HealthyPlate
⚠️ 本篇文章已搬遷至 css.im1010ioio.dev，請至新站閱讀完整版。
↓ 今日學習重點 ↓
理解關於瀏覽器支援度的重要性
理解各家瀏覽器的開發注意事項
理解瀏覽器的 CSS 實驗性語法是什麼
不同的瀏覽器，如：Chrome、Safari、Edge、Firefox 等等，也是製作網頁需要考量的部分。因為就算是同樣的語法，不同的瀏覽器對它解讀的方式有可能會不一樣，或是不支援，最終導致破版。
因此，製作完網頁，可以的話，建議盡量使用各個瀏覽器跑過一遍做測試，看看有沒有因為相容性而產生的問題。我們製作網頁的目標就是為了讓大家都可以看，所以理論上各個常見的瀏覽器都要能正常運行。如果遇到真的不能正常運作的時候，就要有替代方案，或是改用別的方式做。
No comments yet. Be the first to comment.
本系列文章目標是學習 CSS 基本知識，並且研究 The State of CSS 中值得令人期待新屬性，讓想要學習 CSS 的人也能一起學到新知識，不用再零零散散地去爬文搜尋。此外，還會提及一些前端基本知識、版本控制、開發經驗等必要概念，讓新手對於前端開發有全面的認識。
⚠️ 本篇文章已搬遷至 css.im1010ioio.dev，請至新站閱讀完整版。 我把我所知的 Git 知識都放在這了，自己去拿吧！（航海王口吻）不過也許有誤，或者是更延伸的知識，歡迎大家留言給我。XD ↓ 今日學習重點 ↓ 理解版本控制的重要性 了解 Git 版控的概念 了解 Git Flow，開發上的使用情況 為什麼寫程式要使用版本控制呢？ 你有遇過像上面這樣的情況嗎？檔案修修改改，再加上其他人的版本，最後已經不曉得在改哪一個檔案了。如果這時候，突然需要找到過程中寫過的...
⚠️ 本篇文章已搬遷至 css.im1010ioio.dev，請至新站閱讀完整版。 我們已經了解了 SASS/SCSS 的所有主要功能了，不過「我要如何確保別人（或未來的自己）不會用錯我寫的工具？」這是當 Mixin 和 Function 變得越來越複雜時，需要好好考慮的問題。 在 SCSS 中，可以為自己的 Code 建立「防呆」和「除錯」機制，SCSS 提供了三個指令，也就是：@debug、@warn 和 @error。其實我們在介紹 Lists 和 Maps 時就已經稍微帶過其中的 @...
⚠️ 本篇文章已搬遷至 css.im1010ioio.dev，請至新站閱讀完整版。 昨天學到的 List 是個簡單的列表，今天我們要來看看 SCSS 中的 Map，它有點像 json 資料。 假設專案裡有 5 個主要顏色、4 個斷點、6 種字體大小。如果用傳統的變數，你會有 15 個散亂的變數 $variable。但是用了 Map，就可以把它們全部收納在一個變數裡，讓結構一目了然。 一、Map 語法 1. 基本語法 Map 是由「鍵值對 (key-value pairs)」組成，比方說像下...
⚠️ 本篇文章已搬遷至 css.im1010ioio.dev，請至新站閱讀完整版。 在 SASS/SCSS 中，我們已經使用變數、Mixin 和 Function 等語法來幫我們管理 CSS Code 了，但是它還是可能會亂，例如散亂的單一變數，除了寫註解外，還有什麼辦法能夠讓 Code 更有結構呢？ 答案是 SCSS 的資料結構——Lists 和 Maps，其實昨天在寫 Function 時有稍微帶過，今天，我們就更近一步先來仔細研究 Lists 吧！ 一、List 語法 List (列...
⚠️ 本篇文章已搬遷至 css.im1010ioio.dev，請至新站閱讀完整版。 我們已經一路學習了 SCSS 的變數、顏色、邏輯判斷與迴圈等等，你可能已經覺得 SCSS 非常強大了。但今天，我們要來認識 SCSS 中一個更厲害的用法：Function 函式。 Function 能讓你為你的樣式打造屬於你自己的工具。 假設，你經常需要做一些重複性的計算，或要根據不同的輸入產生特定的樣式。每次都要重寫一遍，那這樣就會很難維護。這時候，Function 就可以派上用場了！ 一、Functio...
⚠️ 本篇文章已搬遷至 css.im1010ioio.dev，請至新站閱讀完整版。 今天，我們來介紹 SCSS 中最像「程式語言」的部分——SCSS 的控制指令 (Control Directives)，它們能讓你的樣式擁有真正的「邏輯」，根據條件、迴圈來自動生成樣式，也就是所謂的： @if：如果 A 否則 B @each：處理「每一個」重複 @for：由數字跑迴圈 @while：條件成立就不斷循環 一、@if：如果 A 否則 B @if 就如同其他程式語言中的 if/else...
