고정 헤더 영역
상세 컨텐츠
본문
State of CSS 2022 - Google I/O
1. Cascade Layers
2. Subgrid
Grid lines made available for children and grandchildren.
3. @container (aka Container Queries) (가장 기대하고 있는 기능 중 하나)
/* establish a container*/
.day {
container-type: inline-size;
container-name: calendary-day;
}
@container calendar-day (max-width: 200px) {
.date {
display: block;
}
.date-num {
font-size: 2.5rem;
display: block;
}
}Color 4 & 5
4. hwb()
==h==ue, ==w==hiteness and ==b==lackness
:root {
--hws-swatch-1: hwb(200 75% 0%);
}5. Color spaces
Reach into, mix within, and interpolate in more than sRGB.
6. color-mix()
Mix any 2 colors in a color space of your choice.
.color-mix {
--pink: color-mix(red, white);
--brand: #0af;
--text1: color-mix(var(--brand) 25%, black);
--text2: color-mix(var(--brand) 40%, black 60%);
}7. color-contrast() (가장 기대하고 있는 기능 중 하나)
let the browser dynamically pick an accessible color for you.
.color-contrast {
--bg: hotpink;
background: var(--bg);
color: color-contrast(var(--bg));
}
.other-brand {
--bg: indigo;-
}
:root {
--text-on-bg: color-contrast(
var(--bg-blue-1)
vs
var(--text-subdued),
var(--text-light),
var(--text-lightest),
to AA
)
}8. Relative Color
Extract new colors from other colors.
ex) making color palettes from brand color
#relative-color {
--color: #0af;
--abs-change: lch(from var(--color) 75% c h);
--rel-change: lch(from var(--color) 1 calc(c-20%) h);
}9. Gradients
because of new color spaces, many types of gradients added.
/* gradient by hsl color space */
background-image: linear-gradient(
to right in hsl,
black, white
)10. Colrv1 Fonts
New smaller color font format:
embedded vectros offering gradients and blend modes
@import url(https://fonts.googleapis.com/css2?family=Bungee+Spice);
@font-palette-values --colorized {
font-family: "Bungee Spice";
base-palette: 0;
override-colors: 0 hotpink, 1 cyan, 2 white;
}
.spicy {
font-family: "Bungee Spice";
font-palette: --colorized;
}11. inert (기대 기대)
An attribute to control interaction bounds
<body>
<div class="modal">
<h2>Modal Title</h2>
<button>Save</button>
<button>Discard</button>
</div>
<main inert>
<!-- cannot be keyboard focused or clicked -->
</main>
</body>12. Viewport units
13. :has()
Select element in the beginning or middle of a selector, not just the end.
aL:has(> img) {...}
figure:has(figcaption) img {...}'Programming' 카테고리의 다른 글
| web의 현재 - Google IO 2022 [Google Chrome Developers] (0) | 2022.05.27 |
|---|---|
| QR 스마트 업로드 (feat.카카오톡 챗봇) (2) | 2020.07.23 |
| 웹 설문 영상 미리보기 (video src에 사용되는 영상의 코덱) (0) | 2020.07.21 |
| 비동기 작업들(Async Processes)과 시한폭탄(timeout) (2) | 2020.07.15 |
| Javascript 엔진 (0) | 2019.08.31 |
댓글 영역