iT邦幫忙

2023 iThome 鐵人賽

DAY 8
0
Vue.js

業主說給你30天學會Vue系列 第 8

V08_在vue之前_必備的CSS基礎(1)_動態控制

  • 分享至 

  • xImage
  •  

V08_在vue之前_必備的CSS基礎(1)_動態控制

今天來探索一下有關CSS的重要概念
對於進入vue之前,要學習如何動態控制CSS
也就是可以根據不同的版面大小,資料內容,操作狀態來控制樣式的呈現。
在以往網頁在CSS設定之後,基本上就固定了,
若要動態改變,就需要編寫JS程式碼來控制
但是如果之後有樣式而修改時,就要進到程式碼找出控制的那段程式或是條件設定
一般的網頁需求,可能這樣的狀態還算可以應付,
但是一旦網站系統規模變大之後,
就變得不容易分工及維護了
這也就是vue想要解決的問題

因此,除了樣式本身與設計排版有關的學習之外
這篇主要想關注的是有關CSS的動態控制的問題

哪些CSS需要動態控制呢?
有以下3個方向來探索
版面大小,資料內容,操作狀態這三個方向

先來了解一下幾個有@開頭的用法,稱為 At-rules
可以參考MDN有關At-rules的網頁說明
https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule

基本得語法是 @identifier (RULE);
跟其他CSS樣式屬性一樣,是寫在.css檔案中

@charset "utf-8";
是設定網頁的字集是 utf-8

@import

@import url("my-imported-styles.css");
@import "custom.css";

是匯入外部的css檔案,要注意的是 @import 要放在css檔的最開頭的地方
外部的css檔案 可以用url()的方式,也可以直接是檔案名稱

@import url("fineprint.css") print;
@import url("bluish.css") print, screen;
@import "common.css" screen;
@import url("landscape.css") screen and (orientation: landscape);

以上是指在符合後面的media條件時,才匯入css檔案

@import url("gridy.css") supports(display: grid) screen and (max-width: 400px);
@import url("flexy.css") supports(not (display: grid) and (display: flex)) screen and (max-width: 400px);

以上是指在符合後面的顯示條件時,才匯入css檔案

@import url("whatever.css") supports((selector(h2 > p)) and (font-tech(color-COLRv1)));

以上是指在符合後面的selector條件時,才匯入css檔案

@import "theme.css" layer(utilities);

以上是指將css檔案匯入至名為utilities的layer

@media

media條件 就是 media queries
可以參考一下MDN的說明
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries

在此有看到幾個名詞及功能

media queries, screen, print
supports(), selector(), font-tech(), layer()
display: grid, display: flex, max-width: 400px

media queries就是用來設定樣式要作用在什麼樣的media條件下
通常會用在

@media and @import 的at-rules中
<style>, <link>, <source> 等的標籤中

還有屬性有media的標籤中,像是<div media=screen></div>
其中可以設定的media queries的條件有

Media types ->  all, print, screen -> 可以搭配 not 或 only 等條件
screen -> 是指一般的螢幕連續顯示模式
print -> CSS paged media 是指在螢幕上以列印分頁顯示模式

html

<div>Box 1</div>
<div>Box 2</div>
<div>Box 3</div>
body {
  display: flex;
}

div {
  background: yellow;
  width: 200px;
  height: 200px;
  margin: 0.5rem;
  padding: 0.5rem;
}

@media (orientation: landscape) {
  body {
    flex-direction: row;
  }
}

@media (orientation: portrait) {
  body {
    flex-direction: column;
  }
}

@media (orientation: landscape)
是指在橫式觀看狀態下的css樣式

在新版的 Media Queries Level 4 規範
有支援這個語法

@media (height > 600px) {
  body {
    line-height: 1.4;
  }
}

@media (400px <= width <= 700px) {
  body {
    line-height: 1.4;
  }
}

網頁視窗觀看尺寸條件設定,可以有比較的條件語法

原本是像這樣

@media only screen and (min-width: 320px) and (max-width: 480px) and (resolution: 150dpi) {
  body {
    line-height: 1.4;
  }
}

這2個不是很直覺
min-width: 320px -> 是指大於320px的尺寸
max-width: 480px -> 是指小於480px的尺寸

可以改寫為

@media only screen and (width > 320px) and (width < 480px) and (resolution: 150dpi) {
  body {
    line-height: 1.4;
  }
}

@supports

接下來是 @supports 是指如果瀏覽器有支援樣式屬性,則可設定以下樣式,稱為feature query
https://developer.mozilla.org/en-US/docs/Web/CSS/@supports

html

<body>
	<div>Box 1</div>
	<div>Box 2</div>
	<div>Box 3</div>

	<ul class="flex-container">
	  <li><a href="#">Index</a></li>
	  <li><a href="#">About me</a></li>
	  <li><a href="#">Contact</a></li>
	</ul>
	<script>

	</script>

</body>

style

<style>
  @supports (display: flex) {
    div {
      background:blue;
      color:darkgoldenrod;
    }
    a {
      color:darkgoldenrod;
    }
  }

  @media (orientation: landscape) {
    body {
      flex-direction: row;
    }
  }

  @media (orientation: portrait) {
    body {
      flex-direction: column;
    }
  }
  
  body {
    display: flex;
  }

  div {
    background:yellow;
    width: 200px;
    height: 200px;
    margin: 0.5rem;
    padding: 0.5rem;
  }
</style>

以上是指 如果瀏覽器有支援display:flex的話,樣式就採用以下設定

div {
  background:blue;
  color:darkgoldenrod;
}
a {
  color:darkgoldenrod;
}

但是如果 後面的樣式有重覆設定的話,會替代之前的樣式
因此樣式出現的順序就很重要了

//----

@keyframes

接下是 @keyframes

@keyframes slidein {
  from {
    transform: translateX(0%);
  }

  to {
    transform: translateX(100%);
  }
}

上面的css是指設定一個slidein的 @keyframes,from是開始的狀態,to是結束的狀態

@keyframes identifier {
  0% {
    top: 0;
    left: 0;
  }
  30% {
    top: 50px;
  }
  68%,
  72% {
    left: 50px;
  }
  100% {
    top: 100px;
    left: 100%;
  }
}

也可以用百分比的方式表示不同的動態變化階段

@keyframes important1 {
  from {
    left: 50px;
  }
  50% {
    margin-top: 150px !important;
  } /* 忽略 */
  to {
    margin-top: 100px;
  }
}

!important 是指這個屬性有最高的優先權,也就是說如果有設定相同的屬性時,
有!important的屬性就不會被取代

不過在 @keyframes 的屬性設定中,加上 !important 反而是要被忽略掉
參考MDN的說明
https://developer.mozilla.org/en-US/docs/Web/CSS/important

a {
  color: red;
  transition: all 1s linear;
}
a:hover {
  font-size: 200%;
}

這個效果是游標停在連結上方時,文字會轉場到2倍大,然後停在2倍的狀態
直到游標移出連結,文字再轉場到原本的大小

a {
  color: red;
}
a:hover {
  animation: important1 1s infinite;
}

@keyframes important1 {
  0% {
    font-size: 100%;
  }
  50% {
    font-size: 200%;
  }
  100% {
    font-size: 100%;
  }
}

這個效果是游標停在連結上方時,文字會產生放大到2倍大再縮小回原大小的動畫,而且會反覆執行下去,
直到游標移出連結,文字點到原本的大小,同時動畫停止

以上可看到有2種方法可以來表現轉場 transition: 或是 動畫 animation: 效果

//------
以下有3個容易混淆的單字及作用
transform: 是指轉換,一般有平移translate,旋轉rotate,縮放scale
transition: 是指轉場,就是從一個樣式狀態轉換到另一個樣式狀態的方式,像是轉換的速度,時間
animation: 是指動畫,也可以說是樣式狀態轉換,只是比transition多了更多的階段的樣式設定

translate() -> 是指平移
rotate() -> 是指旋轉
scale() -> 是指縮放

最後整理一下

@media
@import
@supports
@keyframes

這些所謂的 At-rules,
在網頁的RWD或是動態變換,都發揮很重要的效果


上一篇
V07_在vue之前_必備的JS基礎(4)_同步與非同步的操作
下一篇
V09_在vue之前_必備的CSS基礎(2)_排版控制
系列文
業主說給你30天學會Vue31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言