Int's blog

CSS: white-space

發表於 2022-09-10

white-space是針對空格做換行的設定，有以下幾個選擇

normal: 連續的空白字元會被合併(collapse)，換行字元被視為空白字元。換行只在被文字空間限制時發生。
nowrap: 對待空白和換行字元的方式和normal一樣，但不會發生任何換行。
pre: 連續的空白字元都會被保留。換行在有換行字元以及<br>時發生。
pre-wrap: 連續的空白字元都會被保留。換行會在換行字元、有<br>元素以及被文字空間限制時發生。
pre-line: 連續的空白字元會被合併(collapse)。換行在換行字元、 <br>以及被文字空間限制時發生。

範例

CSS: word-break

發表於 2022-09-09

word-break是用來對內文做自動換行的語法，除了英文的斷行，也有針對中日韓語系的斷行設定。

normal: 依照各語言的預設方法斷行(單字太長會超出)。
break-all: 超過邊界就會自動斷行(包含中日韓)
keep-all: 自動斷行，但在中日韓語系不適用，所以有使用到中日韓的網站不要使用。
break-word: 即使單字太長也會自動斷行，和使用 word-break: normal + overflow-wrap: anywher的效果相同。

範例

CSS: word-wrap

發表於 2022-09-08

word-wrap，又或者可以寫成overflow-wrap，是css中文字用來換行的語法。

normal: 只在單字結束時換行，所以可能會導致文字超出div(overflow)。
anywhere: 在單字結束時換行，如果沒有適合的斷點會強制換行，但會考慮soft wrap。
break-word: 在單字結束時換行，如果沒有適合的斷點會強制換行，不考慮soft wrap。

範例

在範例中我設定box最大寬度是150px，最小寬度是最大字母的大小(這裡會顯示出anywhere和break-word的差異)。

在normal情況下，如果文字本身太長是不會換行的，即使這樣文字會超出容器。在anywhere時會換行，但是換行的基準是最小寬度。break-word則是會把依照normal的方式，但超出的字母會換行。

總結

一般情況都是使用break-word，並且word-wrap都會搭配word-break使用，下一篇我就會來介紹word-break。

HTML: a標籤裡面不能有a標籤

發表於 2022-09-07

這幾天在寫六角學院切版直播班第八週作業時踩到了一個地雷，我在a標籤裡包了a標籤，我原本是要讓card變得可點擊，並且裡面有個按鈕。一般來說我在製作按鈕都會使用a標籤，導致了我a標籤裡還有一個a標籤，結果我的結構在網頁上呈現出來變成我的card-body都無法點擊，後來將a標籤改成button標籤就解決了這個問題。

HTML規定a標籤裡不能有a標籤，同時如果a標籤沒有href屬性，那就不要用a標籤。

這之後我在製作按鈕時應該會改成使用input標籤或button標籤，以避免再出現相同的情況。

CSS: 製作三角形

發表於 2022-09-05

你知道CSS不只可以用來幫網頁增加樣式，還可以在網頁上畫圖嗎?在卡片右下方放上一個三角形算是蠻常見的設計(如圖)，所以這篇會來介紹如何畫出三角形，為你的網頁增加設計感。

步驟

首先給一個box
給他的四邊加上不同顏色的border觀察一下，可以發現border和border之間的邊緣是斜的，我們就是要利用這個特性製作三角形

把背景改成透明只留下border

讓box的長寬都歸零，這時候三角形就出現了

把自己想要的三角形留下，其他border改成透明(這裡我留右邊和下面，並都改成藍色)

Codepen

總結

是不是很神奇? 自己在寫得時候可以跳過1、2步驟，直接寫transparent就好，這邊只是方便講解才列出的。

輪播插件: swiper.js

發表於 2022-09-05

這篇要介紹一個很好用的插件-swiper.js。這個插件可以用來做卡片輪播動畫，最重要的是他提供RWD以及可以客製化樣式。

安裝

官網: https://swiperjs.com/
npm:
1
npm install swiper

CDN:

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"/>

<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>

使用方法

html

最外層是swiper，內層會有swiper-wrapper，wrapper裡面用swiper-slide包輪播的卡片。視需求可以新增pagination(底下的換頁點點)、navigation buttons(左右換頁)、scrollbar

<!-- 這裡的mySwiper可以自己取 -->
<div class="swiper mySwiper">
        <!-- Additional required wrapper -->
        <div class="swiper-wrapper">
          <!-- Slides -->
          <div class="swiper-slide">Slide 1</div>
          <div class="swiper-slide">Slide 2</div>
          <div class="swiper-slide">Slide 3</div>
          ...
        </div>
        <!-- If we need pagination -->
        <div class="swiper-pagination"></div>

        <!-- If we need navigation buttons -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>

        <!-- If we need scrollbar -->
        <div class="swiper-scrollbar"></div>
     </div>

css
- swiper有提供自己的css，可以按照css內定義的class，用覆蓋的方式複寫上自己的樣式，有些東西有swiper自己的樣式，在修改時要特別注意。更多可以參考官方文件
js
- swiper提供非常多js動畫，可以根據自己需求選擇對應的動畫，可以參考官網的demo，點擊open in new window可以觀看原始碼
- 要使用swiper的初始設定要在js撰寫swiper的語法(.mySwiper要填入自己為swiper命名的class)
1
var swiper = new Swiper(".mySwiper", {});
- 要新增其他動畫等等就可以依據官網的各種demo複製貼上做修改

總結

swiper最強大的但同時也最讓我頭痛的是他的樣式客製化，會寫的話基本上什麼樣的樣式都能靠自己手刻css寫出來，但麻煩的是要先弄清楚他原本的css怎麼寫，否則會蓋不掉。

如何在網頁上使用線上icon

發表於 2022-09-03

在網頁上通常會使用小圖示或icon來增加設計感與樣式，也有許多按鈕都是使用icon來呈現，這篇會介紹線上svg或線上icon的引入方式。

線上icon網站
- 首先要找到有提供線上icon的網站，常用的有google font、fontawsome等免費網站(fontawsome為部分收費)。
根據icon網站的指引引入cdn
- 以google font為例，點擊icon後右手邊就會出現cdn可以讓開發者引入
- fontawsome的話要先填寫email他才會寄cdn給你
將cdn引入專案中
- 把複製好的code貼到自己html的header即可
根據網站的說明複製對應的icon code
- 引入cdn後就可以開始使用icon了，以google font為例，右手邊也會有icon自己的code，只需要複製並貼到自己想要放icon的位置即可

CSS: BEM

發表於 2022-09-02

BEM命名法(Block-Element-Modifier)是一種CSS class的命名方式，和OOCSS以及SMACSS相同，都是為了讓css更結構化、更具可讀性。

Block、Element、Modifier

Block指的是區塊，一般來說我們都會把網頁切分成很多區塊，並以語意化的方式幫他命名，ex: menu、navbar等等。
Element指的是區塊內的元素，比如說navbar裡的item。
Modifier指的是修飾符，用來表示元素的狀態，比如active、disabled等等。

命名方式

BEM的寫法是使用兩個下底線或破折號連接

1 2	Block__Element Block__Element--Modifier

ex:

1
2
3

navbar
navbar__item
navbar__item--active

在SCSS中使用

之前介紹scss時有介紹到scss可以用&來做連接，所以BEM命名法就可以完美的套用到scss結構中

navbar {
	....
    &__item {
    	....
        &--active {
        	...
        }
    }
}

結語

BEM綜合了OOCSS清晰架構，也不會像SMACSS那樣會非語意化的class，算是三者中我最喜歡的一種命名方式，不過並不會每個元素都使用BEM，依照需求調整才是最好的做法。

CSS: SMACSS

發表於 2022-09-01

SMACSS(Scalable and Modular Architecture for CSS)，使用結構分類，將CSS拆分成不同類別，在使用SCSS開發時也會用到SMACSS，將樣式拆分成多個檔案，主要會拆成以下五個類別:

base: css基礎設定，包含h1~h2、html、body上等等的設定。
layout: 網頁基礎架構，包含header及footer。
module: 各種元件，例如button、form等等。
state: 元件狀態，例如a:hover、button:focus。
theme: 元件的顏色或大小。

命名方式會用-分隔，比如bs5中的btn-primary就是SMACSS的方式。

SMACSS雖然在排列組合上很方便，但結構分類是使用者自己劃分，界線較為模糊。
SMACSS與OOCSS很相似，也有相同的優點，都能夠讓程式碼更加易於維護。

CSS: OOCSS

發表於 2022-08-31

物件導向CSS(Object-Oriented CSS，OOCSS)，是一種常見的css命名方式，目的是鼓勵開發者設計出的class能夠最大化的重複使用，讓程式碼更結構化、更易於管理與維護，未來在新增樣式上就不需要撰寫新的class。

兩大原則

樣式與結構分離: 元素的大小、樣式、顏色做分離，不要寫在同一個class。

類似bs5中的btn、btn-primary之間的關係，元件的基礎樣式是一個class，其他可更改的，比如說大小、顏色等等會獨立出來成另一個class，如此一來程式碼會變得更加靈活。
1
2
<div class="box box-large box-primary"></div>
<div class="box box-small box-secondary"></div>

box的結構與樣式分離

.box {
	width: 100px;
    height: 100px;
    border: 1px solid transparent;
}

.box-large {
	width: 200px;
    height: 200px;
    border: 2px solid transparent;
}

.box-small {
	width: 50px;
    height: 50px;
}

.box-primary {
	background: #000;
    border-color: #fff;
}

.box-secondary {
	background: #fff;
    border-color: #000;
}

內容與容器分離: 少用標籤選擇器，盡量使用類別去撰寫。
- 比如說我現在有一個p段落，想讓他的顏色和其他p段落不同，為他設置一個新的class，而不是直接用子代選擇器或者後代選擇器，如此一來如果以後有其他元素也想使用這個樣式就可以直接使用，在bs5或tailwind中utilities就是這個目標的體現。
  1
  2
  3
  <div class="section1">
  <p class="highlight">Lorem ipsum dolor sit amet consectetur </p>
  </div>
- 不要使用:
  1
  2
  3
  4
  .section1 p {
  color: gray;
  font-weight: bold;
  }
- 推薦使用:
  1
  2
  3
  4
  .highlight {
  color: gray;
  font-weight: bold;
  }

總結

適當的使用可以減少class的重複率，使得程式碼更加乾淨，但因為命名方式不夠語意化，所以相當仰賴文件的撰寫，若是網站規模不大不使用oocss或許會是更好的選擇。除了OOCSS，還有SMACSS、BEM兩種命名方式，之後也會撰寫文章來介紹。