我的程式筆記: CSS

顯示具有 CSS 標籤的文章。顯示所有文章

2025-06-19

CSS / JS 的圖形矩陣處理

眾所周知，CSS 的 transform 或是 SVG 的 transform 可以使用 translateX、rotateX、scale……等 transform functions。而裡面最為複雜的就是 matrix

參閱 MDN 的說明， matrix 有 6 個參數：matrix(a, b, c, d, tx, ty) ，以投影座標（因為我常用的 GIMP 、我當初學的都是使用投影坐標（projective coordinates），我這篇也都使用投影座標來講）來表示的話，就是：

(\begin{matrix} a & c & tx \\ b & d & ty \\ 0 & 0 & 1 \end{matrix})

如果今天我 CSS 是 translateX(100px)，那相當於matrix(1, 0, 0, 1, 100, 0)，即： $(\begin{matrix} 1 & 0 & 1 \\ 0 & 100 & 0 \\ 0 & 0 & 1 \end{matrix})$

2024-08-16

以數字開頭的 class element

如果 HTML code 如下

<span>Hello</span>&nbsp;
<span class="123">John Smith</span>

而 CSS 寫成如下，是無法作用的

.123{
	font-weight: bold;
	color: CornflowerBlue;
}

2024-07-29

在 iPhone 遇到的 CSS 問題

這是最近遇到的狀況。

我在編寫網頁時，網頁有個圖示在電腦版跟手機板要以不同顏色顯示。

2024-06-19

紀錄：CSS優先級

最近看到以下2篇文章，可以很好的了解 CSS 優先級的處理

2024-05-03

SASS/SCSS處理 CSS 變數的問題

這是我使用他人套件時遇到的坑。

在使用 SASS / SCSS 時，遇到如下的 code

$red: #DB055E;

:root {
	--red: $red
}

.danger {
	color: var(--red)
}

我預期他應該會生成

:root {
	--red: #DB055E;
}
.danger {
	color: var(--red);
}

但實際上卻是生成

:root {
	--red: $red;
}
.danger {
	color: var(--red);
}

2023-11-30

PDF 的 CSS

pdf 的 CSS 意外複雜

首先 pdf 的四個邊就分成好幾個區塊了（可以用來放置頁碼之類的），詳情可參閱 oxygenxml 的說明（web archive）。

再來是背景。貌似 pdf 對背景圖的 CSS 支援不夠完整？至少我最近在使用 background-size: cover 會失敗

2023-07-25

設定只有特定瀏覽器才會執行的 CSS

2022-10-17

Less import 外部樣式

這是我在使用 Less 時遇到的問題

當我要引用外部的樣式，例如 google font：

@import url('https://fonts.googleapis.com/css2?family=Fredericka+the+Great');

@default-color: #333;

body{
	color: @default-color;
	font-family: 'Fredericka the Great', cursive;
}

會被編譯成如下的 css：

@font-face {
	font-family: 'Fredericka the Great';
	font-style: normal;
	font-weight: 400;
	src: url(https://fonts.gstatic.com/s/frederickathegreat/v15/9Bt33CxNwt7aOctW2xjbCstzwVKsIBVV-9Sk.ttf) format('truetype');
}
body {
	color: #333;
	font-family: 'Fredericka the Great', cursive;
}

可是，外部的 CSS 我並不想要直接將之轉換，我想要匯出的 CSS 依舊使用 @import