- きっかけ
- Layout
- table
- float
- Flexbox
- CSS Grid
- Custom Properties
- ブラウザの互換性
- CSS Nesting Module（Working Draft）
- CSS Transition
- CSS Layer（Experimental）
- :has() 疑似クラス
- CSS Houdini
- Properties and Values API
- Typed OM
- Painting API
- Layout API
きっかけ
fukabori.fm で「2022年のフロントエンド開発、特にCSS事情」という会をきっかけに2022年6月頃にまとめたものです。
Layout
ずっと前はこんな感じで table で組んでいましたね。
table
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
table {
width: 800px;
text-align: center;
}
</style>
</head>
<body>
<table border="2px solid #bbb">
<tr>
<td>トップ</td>
<td>映画出演</td>
<td>ドラマ出演</td>
<td>舞台出演</td>
<td>写真集</td>
<td>出版本</td>
</tr>
</table>
</body>
</html>float
float を使ってレイアウトを組んだりもしていました。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="main">
<div class="header">
<div class="left">トップ</div>
<div class="left">映画出演</div>
<div class="left">ドラマ出演</div>
<div class="left">舞台出演</div>
<div class="left">写真集</div>
<div class="left">出版本</div>
</div>
<div class="content">
コンテンツ<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tristique sapien ac erat tincidunt, sit amet dignissim lectus vulputate. Donec id iaculis velit. Aliquam vel malesuada erat. Praesent non magna ac massa aliquet tincidunt vel in massa. Phasellus feugiat est vel leo finibus congue.
</div>
</div>
</body>
</html>.main {
width: 800px;
}
.header {
text-align: center;
}
.left {
float: left;
width: 133px;
background-color: aquamarine;
}
.content {
clear: both;
background-color: antiquewhite;
}Flexbox
Flexbox がでてきて楽にレイアウトが組めるようになりました。
- 一次元のレイアウトモデル
- 行か列のいずれかの方向にしかレイアウトしない
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="container">
<div class="box">トップ</div>
<div class="box">映画出演</div>
<div class="box">ドラマ出演</div>
<div class="box">舞台出演</div>
<div class="box">写真集</div>
<div class="box">出版本</div>
</div>
<div class="container-reverse">
<div class="box">トップ</div>
<div class="box">映画出演</div>
<div class="box">ドラマ出演</div>
<div class="box">舞台出演</div>
<div class="box">写真集</div>
<div class="box">出版本</div>
</div>
</body>
</html>.container {
border: 2px solid #ccc;
background-color: #E4EDE8;
margin-bottom: 30px;
display: flex;
width: 800px;
}
.container-reverse {
border: 2px solid #ccc;
background-color: #E4EDE8;
margin-bottom: 30px;
display: flex;
flex-direction: row-reverse;
width: 800px;
}
.box {
color: #fff;
font-weight: bold;
text-align: center;
line-height: 30px;
background-color: #3CB371;
margin: 10px auto;
width: 130px;
}CSS Grid
グリッドシステムにより grid, flex, float を組み合わせて下記のようにレイアウトが組みやすくなりました。
- 二次元グリッドシステム
- grid, flex, float 組み合わせ
参考
- IE11 はベンダープレフィックスを付ければ使える
Custom Properties
- カスタムプロパティ記法 - ハイフン2つ (
--) で始まるカスタムプロパティ名によって設定する -
var()関数を使ってアクセス
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
コンテンツ
</div>
</body>
</html>:root {
--main-bg-color: dark;
--dark-bg-color: light;
}
.container {
background-color: var(--main-bg-color);
}ブラウザの互換性
CSS Nesting Module（Working Draft）
- スタイルルールを入れ子（ネスト）にして記述するための仕様
- ネイティブの CSS でスタイルのネストがサポートされることにより、プリプロセッサを使用しなくても利用可能
こんな CSS が
table.colortable td {
text-align:center;
}
table.colortable td.c {
text-transform:uppercase;
}
table.colortable td:first-child, table.colortable td:first-child+td {
border:1px solid black;
}
table.colortable th {
text-align:center;
background:black;
color:white;
}こんな風に書けるようになります。
table.colortable {
& td {
text-align:center;
&.c { text-transform:uppercase }
&:first-child, &:first-child + td { border:1px solid black }
}
& th {
text-align:center;
background:black;
color:white;
}
}参考
CSS Transition
- CSS プロパティが変化する際のアニメーションの速度を操作する手段を提供
CSS Layer（Experimental）
<div class="box">
<p>Hello, world!</p>
</div>p {
color: rebeccapurple;
}
@layer type {
.box p {
font-weight: bold;
font-size: 1.3em;
color: green;
}
}
:has() 疑似クラス
- 引数として渡されたセレクターに (指定された要素の
:scopeの相対で) 該当する要素が一つ以上の要素に一致することを表す
参考
CSS Houdini
- Houdini は、CSS エンジンの一部を公開する低レベル API のセットであり、開発者はブラウザのレンダリングエンジンのスタイリングおよびレイアウトプロセスにフックすることで CSS を拡張できる
参考
Properties and Values API
- CSS Properties and Values API は、この CSS 変数 (CSS カスタムプロパティ) の仕組みを拡張したもの
- CSS 変数に型を与える
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script>
CSS.registerProperty({
name: '--btn-color',
syntax: '<color>',
inherits: false,
initialValue: 'blue',
});
</script>
</head>
<body>
<div class="container">
コンテンツ
</div>
<button>ボタン</button>
</body>
</html>button {
--btn-color: red;
background-color: var(--btn-color);
transition: --btn-color 1s;
}
button:hover {
--btn-color: green;
}参考
Typed OM
- CSS Object Model から型付きで値が取得可能
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
コンテンツ
</div>
<button id="btn">ボタン</button>
<script>
var el = document.getElementById('btn');
el.style.opacity = 0.3
console.log(el.style.opacity);
console.log(typeof el.style.opacity);
// >> string
el.attributeStyleMap.set('opacity', 0.3);
console.log(el.attributeStyleMap.get('opacity').value)
console.log(typeof el.attributeStyleMap.get('opacity').value)
// >> int
</script>
</body>
</html>参考
