Slide 1
Slide 1 text
UI
立
2025 CSS
ICS
田
MTDDC Meetup TOKYO
2025
2
0
2 5
.
1
1
.
2
9
LINE
Slide 2
Slide 2 text
自己
田
( )
ICS 算 /
大 非
@clockmaker
Slide 3
Slide 3 text
: 19
・
14
・
WebGPU
・ 田
( )
ICS 算 /
大 非
@clockmaker
Slide 4
Slide 4 text
1
.
2
.
3
. UI
4
.
／
5
. CSS
6
.
用
UI
SNS
自
#MTDDC
2024 2025
Slide 5
Slide 5 text
CSS
:has()
文
@starting-style
@property
文
Slide 6
Slide 6 text
Section
1
/
6
Slide 7
Slide 7 text
2025
132 2025 1
月 14
2
11
月
18.3 2025 1
月 26
.
2
11
月
iOS/macOS
26
西 一
134 2025 1
月 1
45
11
月
Slide 8
Slide 8 text
足
2022 Interop
CSS
心
算
Slide 9
Slide 9 text
Announcing Interop
20 25
| WebKit
https://webkit.org/blog/
16 4
58
/announcing-interop-
2
02
5
/
202
5 力
Slide 10
Slide 10 text
web-platform-tests dashboard
https://wpt.fyi/interop-
20 25
Slide 11
Slide 11 text
text-autospace
Noto Sans JP
text-box-trim
contrast-color
Section
2
/
5
Slide 12
Slide 12 text
text-autospace
Slide 13
Slide 13 text
text-autospace
18
.
4
2025 3
月
140
2025 9
月
145
2025 11
月
日 白
Slide 14
Slide 14 text
.text {
text-autospace: normal;
}
Slide 15
Slide 15 text
text-autospace: normal;
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
Windows Noto Sans JP
Slide 18
Slide 18 text
Windows Noto Sans JP
2025 4
月
Windows Update
Windows
1 0
Noto Sans JP
Slide 19
Slide 19 text
Windows Noto Sans JP
font-family: sans-serif; Noto Sans JP
Chrome, Edge
非
面
非
Hi-DPI
Noto Sans JP
高
小
Slide 20
Slide 20 text
Windows Google Fonts
/* @font-face ͰϩʔΧϧϑΥϯτΛ༏ઌ */
@font-face {
font-family: "Local Noto Sans JP";
src: local("Noto Sans JP");
}
body {
font-family: "Local Noto Sans JP", "Noto Sans JP", sans-serif;
}
Slide 21
Slide 21 text
text-box
Slide 22
Slide 22 text
text-box
18
.
2
2024 12
月
133
2025 2
月
-
line-height:
1 大
白
Slide 23
Slide 23 text
.text {
text-box: trim-both cap alphabetic;
}
Slide 24
Slide 24 text
line-height:
2
font-size:
60
px
Slide 25
Slide 25 text
No content
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
No content
Slide 28
Slide 28 text
contrast-color()
Slide 29
Slide 29 text
contrast-color()
26
.
0
2025 9
月
- -
色 比
自
Slide 30
Slide 30 text
button {
background-color: var(--button-color);
color: contrast-color(var(--button-color));
}
Slide 31
Slide 31 text
色 色
Slide 32
Slide 32 text
https://codepen.io/jensimmons/pen/XJJjKMO
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
UI
scroll-state()
interpolate-size
sibling-index()
HDR
Section
3
/
6
Slide 35
Slide 35 text
No content
Slide 36
Slide 36 text
26
.
0
2025 9
月
115
2023 7
月
-
CSS
用
2025
Safari
Slide 37
Slide 37 text
No content
Slide 38
Slide 38 text
scroll-state()
Slide 39
Slide 39 text
scroll-state()
-
133
2025 2
月
-
εΫϩʔϧͷঢ়ଶʹԠͨ݅͡ΛࢦఆՄೳ
ʢεΫϩʔϧத͔Ͳ͏͔ʣ
ίϯςφʔΫΤϦʔͷҰछ
Slide 40
Slide 40 text
https://ics-creative.github.io/
2 5
0
52
6
_scroll-state/scrollable-hint/
Slide 41
Slide 41 text
https://ics-creative.github.io/
2 5
0
52
6
_scroll-state/stuck-navigation/
Slide 42
Slide 42 text
No content
Slide 43
Slide 43 text
(SPA)
18
.
0
2024 9
月
111
2023 3
月
144
2025 10
月
DOM
2025
Firefox
Slide 44
Slide 44 text
No content
Slide 45
Slide 45 text
(MPA)
18
.
2
2024 12
月
126
2024 6
月
-
HTML
Slide 46
Slide 46 text
https://ics-creative.github.io/
2 3
0
51
0
_view_transitions_api/vta-mpa-example/index.html
Slide 47
Slide 47 text
No content
Slide 48
Slide 48 text
interpolate-size
Slide 49
Slide 49 text
interpolate-size
-
129
2024 9
月
-
height:
0
height: auto
FAQ UI
立
Slide 50
Slide 50 text
:root {
interpolate-size: allow-keywords;
}
details {
/* ΞίʔσΟΦϯ͕ด͍ͯ͡Δ࣌ͷதͷελΠϧ */
&::details-content {
transition: height 0.4s, content-visibility 0.4s allow-discrete;
height: 0;
overflow: clip;
}
/* ΞίʔσΟΦϯ͕։͍ͨ࣌ͷதͷελΠϧ */
&[open]::details-content {
height: auto;
}
}
😨
Slide 51
Slide 51 text
:root {
interpolate-size: allow-keywords;
}
details {
/* ΞίʔσΟΦϯ͕ด͍ͯ͡Δ࣌ͷதͷελΠϧ */
&::details-content {
transition: height 0.4s, content-visibility 0.4s allow-discrete;
height: 0;
overflow: clip;
}
/* ΞίʔσΟΦϯ͕։͍ͨ࣌ͷதͷελΠϧ */
&[open]::details-content {
height: auto;
}
}
👍
Slide 52
Slide 52 text
No content
Slide 53
Slide 53 text
sibling-index()
Slide 54
Slide 54 text
sibling-index()
-
130
2024 6
月
-
ελοΨʔΞχϝʔγϣϯʹཱͭ
Slide 55
Slide 55 text
https://codepen.io/argyleink/pen/KwKXPYW
Slide 56
Slide 56 text
HDR
Slide 57
Slide 57 text
HDR
26
.
0
2025 9
月
136
2025 4
月
-
HDR
・ ・
目
HDR
・
CSS HDR
／
SDR
Slide 58
Slide 58 text
Slide 59
Slide 59 text
No content
Slide 60
Slide 60 text
一
一
SDR HDR
一
SDR HDR
Slide 61
Slide 61 text
/* Ұཡը໘ͰपลUIͱͳ͡·ͤΔ */
.thumb img {
/* HDRΛSDR૬ʹ͑Δ */
dynamic-range-limit: standard;
}
/* ৄࡉը໘ */
.detail img {
/* σΟεϓϨΠͷೳྗΛͦͷ··͏ */
dynamic-range-limit: no-limit;
}
Slide 62
Slide 62 text
JS gsap
CSS
言
HDR
Slide 63
Slide 63 text
No content
Slide 64
Slide 64 text
／
Section
4
/
6
dialog - closedby
dialog - command
dialog
行 用
Slide 65
Slide 65 text
dialog closedby
Slide 66
Slide 66 text
dialog closedby
-
134
2025 3
月
141
2025 7
月
Ϟʔμϧͷด͢͡͞Λௐ
ϞʔμϧഎܠԡԼͰϞʔμϧΛด͡Δ͔Λࢦఆ
Slide 67
Slide 67 text
No content
Slide 68
Slide 68 text
No content
Slide 69
Slide 69 text
ޡλοϓͰดͯ͡΄͘͠ͳ͍ϑΥʔϜͷdialog
ϥΠτͳπʔϧνοϓతͳdialog
Slide 70
Slide 70 text
dialog command/commandfor
-
135
2025 4
月
144
2025 10
月
JavaScript dialog
Slide 71
Slide 71 text
https://codepen.io/argyleink/pen/xxowmGG
Slide 72
Slide 72 text
No content
Slide 73
Slide 73 text
26
.
0
2025 9
月
125
2024 5
月
-
CSS
・
Interop
2 02
5
Slide 74
Slide 74 text
https://ics-creative.github.io/
2 5
0
90
1
_dialog/styled-animation/
Slide 75
Slide 75 text
https://ics-creative.github.io/
2 5
0
41
7
_popover-hint/
Slide 76
Slide 76 text
No content
Slide 77
Slide 77 text
CSS
Section
5
/
6
@scope
if()
@function
Slide 78
Slide 78 text
@scope
Slide 79
Slide 79 text
@scope
17
.
4
2024 3
月
118
2023 10
月
146
2025 12
月
CSS
用
2025
Firefox
Slide 80
Slide 80 text
No content
Slide 81
Slide 81 text
No content
Slide 82
Slide 82 text
if()
Slide 83
Slide 83 text
if()
-
129
2024 9
月
-
範
ϝσΟΞΫΤϦʔίϯςφʔΫΤϦʔΛ݅ʹࢦఆ
color: if( media(width <= 768px): red; else: blue; );
Slide 84
Slide 84 text
@function
Slide 85
Slide 85 text
@function
-
139
2025 8
月
-
CSS
@function --space(--n) returns {
result: calc(var(--n) * 8px);
}
.card {
padding: --space(2); /* →16px */
}
Slide 86
Slide 86 text
No content
Slide 87
Slide 87 text
用
UI
Section
6
/
6
Slide 88
Slide 88 text
No content
Slide 89
Slide 89 text
-
135
2025 4
月
-
HTML+CSS
用
JS swiper, slick
自
A
11
Y
高
Slide 90
Slide 90 text
https://ics-creative.github.io/
2 5
0
51
6
_css_carousel/
0 1
/
Slide 91
Slide 91 text
No content
Slide 92
Slide 92 text
https://ics-creative.github.io/
2 5
0
51
6
_css_carousel/
0 2
/
Slide 93
Slide 93 text
scroll-state()
用
100%
85% transition
Slide 94
Slide 94 text
No content
Slide 95
Slide 95 text
No content
Slide 96
Slide 96 text
No content
Slide 97
Slide 97 text
No content
Slide 98
Slide 98 text
-
134
2025 3
月
-
select/option
HTML+CSS
select
文
自
UI
Slide 99
Slide 99 text
https://ics-creative.github.io/
2 5
0
30
7
_custom-select-style/
02
_option-content.html
Slide 100
Slide 100 text
https://ics-creative.github.io/
2 5
0
30
7
_custom-select-style/
03
_selectedcontent.html
Slide 101
Slide 101 text
No content
Slide 102
Slide 102 text
Chromium
心
一方
UI
HTML
HTML
4
TABLE / DIV
HTML
5
header / main / article
HTML
5
.
1
/
5
.
2
dialog UI
Living Standard popover
算
長 言
UI
用 面
Slide 103
Slide 103 text
No content
Slide 104
Slide 104 text
HTML+CSS
黄金
算
Golden Age of Web UI Google I/O
2 0 25
Slide 105
Slide 105 text
ICS
https://ics.media/recruit/