CSS 2.1 vs CSS3 比較工具

本工具提供CSS 2.1與CSS3之間的主要差異比較，協助開發者了解各版本的功能與限制。

選擇器 (Selectors)

CSS 2.1

基本選擇器

支援元素、類別、ID、屬性和後代選擇器。

/* 元素選擇器 */
                    element { property: value; }

                    /* 類別選擇器 */
                    .class { property: value; }

                    /* ID選擇器 */
                    #id { property: value; }

                    /* 屬性選擇器 */
                    [attribute] { property: value; }
                    [attribute=value] { property: value; }

                    /* 後代選擇器 */
                    parent descendant { property: value; }

CSS3

增強選擇器

新增了許多功能強大的選擇器，包括兄弟選擇器、屬性選擇器擴展、偽類和偽元素。

/* 兄弟選擇器 */
                    element ~ sibling { property: value; }

                    /* 相鄰兄弟選擇器 */
                    element + adjacent { property: value; }

                    /* 子元素選擇器 */
                    parent > child { property: value; }

                    /* 擴展屬性選擇器 */
                    [attribute^=value] { property: value; } /* 開頭匹配 */
                    [attribute$=value] { property: value; } /* 結尾匹配 */
                    [attribute*=value] { property: value; } /* 包含匹配 */

                    /* 結構偽類 */
                    :nth-child(n) { property: value; }
                    :nth-of-type(n) { property: value; }
                    :first-child { property: value; }
                    :last-child { property: value; }
                    :only-child { property: value; }
                    :empty { property: value; }

                    /* 狀態偽類 */
                    :checked { property: value; }
                    :enabled { property: value; }
                    :disabled { property: value; }

顏色與透明度 (Colors & Opacity)

CSS 2.1

顏色表示

支援十六進制、RGB和顏色名稱。沒有內建透明度支援。

/* 顏色名稱 */
                    color: black;

                    /* 十六進制 */
                    color: #000000;

                    /* RGB */
                    color: rgb(0, 0, 0);

CSS3

擴展顏色模型

新增RGBA、HSL、HSLA和透明度支援。

/* RGBA */
                    color: rgba(0, 0, 0, 0.5); /* 50%透明度的黑色 */

                    /* HSL (色相、飽和度、亮度) */
                    color: hsl(0, 100%, 50%); /* 紅色 */

                    /* HSLA (帶透明度) */
                    color: hsla(0, 100%, 50%, 0.5); /* 50%透明度的紅色 */

                    /* 透明度屬性 */
                    opacity: 0.5; /* 整個元素50%透明 */

圓角與陰影 (Rounded Corners & Shadows)

CSS 2.1

不支援

CSS 2.1不支援原生圓角和陰影效果，需要使用圖片或其他技巧實現。

/* 需要使用背景圖片或其他方法 */
                    .rounded-corner {
                    background-image: url('corner.png');
                    }

CSS3

內建圓角和陰影

提供border-radius和box-shadow屬性，可以輕鬆創建圓角和陰影效果。

/* 圓角 */
                    border-radius: 10px; /* 所有角 */
                    border-radius: 10px 20px 30px 40px; /* 左上, 右上, 右下, 左下 */

                    /* 陰影 */
                    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* x偏移, y偏移, 模糊, 顏色 */
                    box-shadow: inset 0 0 10px #000000; /* 內陰影 */

                    /* 文字陰影 */
                    text-shadow: 1px 1px 2px black;

漸變 (Gradients)

CSS 2.1

不支援

CSS 2.1不支援原生漸變，需要使用圖片實現。

/* 需要使用背景圖片 */
                    background-image: url('gradient.png');

CSS3

多種漸變類型

支援線性漸變、徑向漸變和圓錐漸變。

/* 線性漸變 */
                    background: linear-gradient(to bottom, #ffffff, #000000);
                    background: linear-gradient(45deg, red, blue);

                    /* 徑向漸變 */
                    background: radial-gradient(circle, yellow, red);

                    /* 重複漸變 */
                    background: repeating-linear-gradient(45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px);
                

轉換與動畫 (Transforms & Animations)

CSS 2.1

不支援

CSS 2.1不支援原生轉換和動畫效果，需依賴JavaScript或Flash。

/* 不支援 */

CSS3

全面的轉換和動畫支援

提供transform、transition和animation屬性，實現豐富的視覺效果。

/* 2D轉換 */
                    transform: translate(50px, 100px);
                    transform: rotate(45deg);
                    transform: scale(1.5);
                    transform: skew(20deg, 10deg);

                    /* 3D轉換 */
                    transform: rotateX(45deg);
                    transform: perspective(500px) rotateY(45deg);

                    /* 過渡效果 */
                    transition: all 0.5s ease;
                    transition: width 2s, height 4s;

                    /* 動畫 */
                    @keyframes example {
                    0% { background-color: red; }
                    50% { background-color: blue; }
                    100% { background-color: green; }
                    }

                    animation: example 5s infinite;

多欄佈局 (Multi-column Layout)

CSS 2.1

不支援

CSS 2.1沒有多欄佈局功能，需要使用多個div元素模擬。

/* 需要使用多個浮動的div元素 */
                    .column {
                    float: left;
                    width: 33.33%;
                    }

CSS3

原生多欄支援

提供column-count和column-width等屬性，輕鬆創建類似報紙的多欄佈局。

/* 欄數定義 */
                    column-count: 3;

                    /* 欄寬定義 */
                    column-width: 200px;

                    /* 欄間距 */
                    column-gap: 40px;

                    /* 欄分隔線 */
                    column-rule: 1px solid #dddddd;

Flexbox與Grid佈局

CSS 2.1

不支援

CSS 2.1主要使用float、position和display屬性進行佈局。

/* 使用浮動和定位進行佈局 */
                    .container {
                    position: relative;
                    }
                    .left-column {
                    float: left;
                    width: 30%;
                    }
                    .right-column {
                    float: right;
                    width: 70%;
                    }

CSS3

強大的佈局系統

引入Flexbox和Grid佈局系統，大幅提升佈局能力。

/* Flexbox */
                    .flex-container {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    flex-wrap: wrap;
                    }
                    .flex-item {
                    flex: 1 0 200px;
                    }

                    /* Grid */
                    .grid-container {
                    display: grid;
                    grid-template-columns: repeat(3, 1fr);
                    grid-gap: 20px;
                    grid-template-areas:
                    "header header header"
                    "sidebar content content"
                    "footer footer footer";
                    }
                    .header { grid-area: header; }

媒體查詢 (Media Queries)

CSS 2.1

基本媒體類型

CSS 2.1支援基本媒體類型，但功能有限。

/* 媒體類型 */
                    @media print {
                    body { font-size: 12pt; }
                    }

                    @media screen {
                    body { font-size: 14px; }
                    }

CSS3

增強的媒體查詢

提供豐富的媒體查詢功能，支持響應式設計。

/* 基於螢幕寬度 */
                    @media (max-width: 600px) {
                    .container { width: 100%; }
                    }

                    /* 組合查詢條件 */
                    @media (min-width: 601px) and (max-width: 900px) {
                    .container { width: 80%; }
                    }

                    /* 基於設備方向 */
                    @media (orientation: landscape) {
                    .sidebar { float: left; }
                    }

                    /* 高解析度螢幕 */
                    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
                    .logo { background-image: url('logo@2x.png'); }
                    }

Web字體 (Web Fonts)

CSS 2.1

有限支援

只能使用用戶系統上已安裝的字體。

/* 使用系統字體 */
                    font-family: Arial, Helvetica, sans-serif;

CSS3

@font-face規則

允許下載並使用自定義字體，極大擴展了網頁設計的可能性。

/* 自定義字體 */
                    @font-face {
                    font-family: 'MyWebFont';
                    src: url('myfont.woff2') format('woff2'),
                    url('myfont.woff') format('woff');
                    font-weight: normal;
                    font-style: normal;
                    }

                    body {
                    font-family: 'MyWebFont', Arial, sans-serif;
                    }

CSS 2.1

1998年發布

基本選擇器

支援元素、類別、ID選擇器和簡單屬性選擇器
簡單顏色模型

支援十六進制、RGB和顏色名稱
盒模型

standard盒模型 (width和height只包含內容區域)
定位系統

static、relative、absolute、fixed定位
背景

基本背景控制 (color, image, repeat, position)
基本文字樣式

字體、大小、行高、字間距等基本控制
不支援特性
- 圓角和陰影
- 漸變
- 轉換和動畫
- 多欄佈局
- Flexbox和Grid
- 高級媒體查詢
- 自定義字體

CSS3

2001年起模組化發展

擴展選擇器

增加了兄弟、子元素選擇器，以及大量偽類和偽元素
增強顏色模型

新增RGBA、HSL、HSLA和透明度支援
盒模型

增加box-sizing屬性，允許選擇盒模型類型
視覺效果

圓角(border-radius)、陰影(box-shadow)、漸變(gradients)
轉換與動畫

2D/3D轉換、過渡效果和關鍵幀動畫
多種佈局系統

多欄佈局、Flexbox、Grid系統
響應式設計

強大的媒體查詢功能，支援各種設備特性
Web字體

@font-face規則，允許使用自定義字體
背景增強

多重背景、背景尺寸、背景起始位置控制
文字效果

文字陰影、溢出控制、換行控制等

汽車買賣合約實際案例比較

以下展示了相同合約使用不同CSS技術實現的差異

佈局技術對比

CSS 2.1 (表格與浮動)

表格與浮動布局

使用傳統的table布局和float浮動技術來呈現頁面結構。

/* 使用表格布局 */
                    .contentTable {
                    width: 100%;
                    border-collapse: collapse;
                    }
                    .contentTable td.number {
                    width: 40px;
                    font-weight: bold;
                    vertical-align: top;
                    }
                    .contentTable td.content {
                    vertical-align: top;
                    }

                    /* 使用浮動布局 */
                    .contractorBox {
                    overflow: hidden; /* 清除浮動 */
                    }
                    .contractorBox .label {
                    float: left;
                    width: 80px;
                    }
                    .contractor {
                    float: left;
                    }

渲染效果

表項目樣式

一、	甲方所有 2022 年 Toyota豐田(日本) 車型 CAMRY 壹輛，牌照 RAP-2069、引擎號碼：JTNBB3HK803004544。

簽署人資訊

甲方(賣方)：

ABCD股份有限公司高雄分公司

統一編號：

99997250

CSS3 (Flexbox)

Flexbox彈性布局

使用現代Flexbox彈性盒子模型進行頁面結構設計。

/* 彈性布局 */
                    .between {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    }

                    .itemBox {
                    width: 100%;
                    display: flex;
                    flex-direction: row;
                    }

                    .itemTitle {
                    font-weight: bold;
                    vertical-align: top;
                    width: 40px;
                    flex-shrink: 0;
                    }

                    .contractorBox {
                    display: flex;
                    flex-direction: row;
                    }

渲染效果

表項目樣式

一、

甲方所有 2022 年 Toyota豐田(日本) 車型 CAMRY 壹輛，牌照 RAP-2069、引擎號碼：JTNBB3HK803004544。

簽署人資訊

甲方(賣方)：

ABCD股份有限公司高雄分公司

統一編號：

99997250

表格效果對比

CSS 2.1

傳統表格樣式

使用傳統的表格結構和樣式，表格元素具有默認的居中特性。

/* 表格樣式 */
                    .table {
                    width: 100%;
                    border: 1px solid #000;
                    border-collapse: collapse;
                    }

                    .table-row-border {
                    border-bottom: 1px solid #000;
                    }

                    .table td.label {
                    width: 20%;
                    border-right: 1px solid #000;
                    }

渲染效果

匯入銀行	台新國際商業銀行建北分行﹙銀行代碼 812﹚
匯款帳號(共14碼)	91497 - 070591234
帳戶名稱	ABCD股份有限公司

表格默認對齊特性

傳統表格中，表頭單元格(th)默認居中對齊，數據單元格(td)默認左對齊。但在實際應用中常通過text-align屬性顯式設置。

表頭(默認居中)	數據單元格(默認左對齊)
表頭(強制左對齊)	數據單元格(強制居中)

CSS3

Flexbox模擬表格

使用Flexbox組件模擬表格結構，實現更靈活的佈局，但需要手動設置對齊方式。

/* Flexbox表格樣式 */
                    .table {
                    width: 100%;
                    border: 1px solid #000;
                    }

                    .tableItem:nth-child(1),
                    .tableItem:nth-child(2) {
                    border-bottom: 1px solid #000;
                    }

                    .tableItem {
                    display: flex;
                    flex-direction: row;
                    }

                    .tableItem > div {
                    padding: 0 5px;
                    }

                    .tableItem :first-child {
                    width: 20%;
                    border-right: 1px solid #000;
                    /* 需要手動設置居中 */
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    }

渲染效果

匯入銀行

台新國際商業銀行建北分行﹙銀行代碼 812﹚

匯款帳號(共14碼)

91497 - 070591234

帳戶名稱

ABCD股份有限公司

Flexbox手動設置對齊

Flexbox默認左對齊，但可以通過justify-content和align-items精確控制對齊方式：

匯入銀行

台新國際商業銀行建北分行﹙銀行代碼 812﹚

匯款帳號(共14碼)

91497 - 070591234

帳戶名稱

ABCD股份有限公司

簽署區塊對比

CSS 2.1

浮動佈局的簽署區塊

使用浮動技術實現並排簽署區塊。

/* 簽署區浮動佈局 */
                    .signsureBox {
                    overflow: hidden; /* 清除浮動 */
                    margin-top: 20px;
                    }

                    .signsureBox .sign-left {
                    float: left;
                    width: 58%;
                    margin-right: 2%;
                    }

                    .signsureBox .sign-right {
                    float: left;
                    width: 40%;
                    }

渲染效果

經辦據點
營業所長	承辦業代

重要提醒事項！！！

1.	甲方員工不代收現金。

CSS3

Flexbox的簽署區塊

使用Flexbox實現並排簽署區塊，更加靈活和自適應。

/* Flexbox簽署區佈局 */
                    .signsureBox {
                    display: flex;
                    flex-direction: row;
                    margin-top: 20px;
                    gap: 20px; /* CSS3新特性 */
                    }

                    .signsureBox > div:nth-child(1) {
                    width: 60%;
                    }

                    .signsureBox > div:nth-child(2) {
                    width: 40%;
                    }

渲染效果

經辦據點

營業所長

承辦業代

重要提醒事項！！！

甲方員工不代收現金。

契約方信息結構對比

CSS 2.1

浮動布局結構

使用浮動布局處理契約方信息，需要額外的清除浮動處理。

/* CSS 2.1契約方信息結構 */
                    /* 未處理的基本結構 */
                    .contractorBox {
                    /* 未清除浮動，會導致容器崩塌 */
                    }
                    .contractorBox .label {
                    float: left;
                    width: 80px;
                    }
                    .contractor {
                    float: left;
                    }
                    .contractorItem .label {
                    float: left;
                    }
                    .contractorItem .value {
                    float: left;
                    }

                    /* 處理後的結構 */
                    .contractorBox {
                    overflow: hidden; /* 清除浮動 */
                    }
                    .contractorItem {
                    overflow: hidden; /* 清除浮動 */
                    }

渲染效果

未處理浮動時（容器崩塌）

甲方(賣方)：

ABCD股份有限公司高雄分公司

統一編號：

99997250

地址：

高雄市左營區重信路777號

處理浮動後

甲方(賣方)：

ABCD股份有限公司高雄分公司

統一編號：

99997250

地址：

高雄市左營區重信路777號

CSS3

Flexbox佈局結構

使用Flexbox處理契約方信息，自然處理容器高度，不需要清除浮動。

/* CSS3契約方信息結構 */
                    .contractorBox {
                    display: flex;
                    flex-direction: row;
                    }

                    .contractorBox > div:nth-child(1) {
                    width: 80px;
                    flex-shrink: 0;
                    }

                    .contractorInformation {
                    padding-left: 20px;
                    }

                    .contractorItem {
                    display: flex;
                    flex-direction: row;
                    }

                    .contractorItem > div:nth-child(1) {
                    flex-shrink: 0;
                    }

渲染效果

Flexbox自然處理容器高度

甲方(賣方)：

ABCD股份有限公司高雄分公司

統一編號：

99997250

地址：

高雄市左營區重信路777號

清除浮動技巧

CSS 2.1

使用overflow清除浮動

在CSS 2.1中，需要使用特殊技巧來清除浮動，防止容器崩塌。

/* 清除浮動的傳統方法 */
                    .contractorBox {
                    overflow: hidden; /* 清除浮動 */
                    }

                    .contractorItem {
                    overflow: hidden; /* 清除浮動 */
                    }

                    /* 另一種清除浮動方法 */
                    .clearfix:after {
                    content: "";
                    display: table;
                    clear: both;
                    }

問題展示

浮動元素未清除的情況（容器崩塌）

浮動元素

使用overflow清除浮動

浮動元素

CSS3

Flexbox自動處理空間

使用Flexbox時，不需要處理浮動問題，佈局更加穩定可靠。

/* 使用Flexbox，不需要清除浮動 */
                    .contractorBox {
                    display: flex;
                    flex-direction: row;
                    }

                    .contractorItem {
                    display: flex;
                    flex-direction: row;
                    }

                    /* 控制元素大小 */
                    .contractorBox > div:nth-child(1) {
                    width: 80px;
                    flex-shrink: 0;
                    }

改進展示

使用Flexbox自動處理空間（無需清除浮動）

Flex項目

Flexbox自動換行

Flex項目

頁面打印控制

CSS 2.1

基礎打印媒體查詢

CSS 2.1提供基本的媒體類型區分，但打印控制有限。

/* 媒體類型 */
                    @media print {
                    body {
                    font-size: 12pt;
                    }
                    }

說明

CSS 2.1的打印控制局限於基本的媒體類型區分，針對打印時的頁面呈現能力有限。在兩份合約中，CSS 2.1版本針對打印僅有基本設置，無法精確控制頁面大小和邊距。

無法指定紙張大小
無法精確控制頁邊距
無法控制分頁行為

CSS3

詳細的頁面設置

CSS3提供@page規則，可精確控制打印頁面的各方面。

/* 控制打印頁面大小和邊距 */
                    @page {
                    size: A4; /* 210mm x 297mm */
                    margin: 10mm;
                    }

                    /* 可以指定不同位置的頁面邊距 */
                    @page :left {
                    margin-left: 20mm;
                    margin-right: 10mm;
                    }

                    @page :right {
                    margin-left: 10mm;
                    margin-right: 20mm;
                    }

說明

CSS3的@page規則允許更精確地控制列印輸出，這在合約文件中特別重要。在第二個模板中可以看到：

明確指定了A4紙張大小
精確定義了10mm的頁面邊距
可以為左右頁面設置不同邊距
可以控制分頁行為與內容流

這些功能在正式文件（如合約）中尤為重要，可確保打印輸出的專業性和一致性。