CSS First. Когда JavaScript не нужен

JavaScript везде

📱 2019 KB

🖥️ 2314 KB

🤔 Заменить на CSS?

JS vs CSS

ChatGPT, помоги найти хорошую карусельку в npm.

<link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
/>

<script
    src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"
></script>

🤩 PROFIT!

gzip_size() {
    echo "Plain: $(curl -s $1 | wc -c)";
    echo "Gzipped: $(curl -s $1 | gzip | wc -c)";
}

41 120 + 4 845 = 45 965

Топ-200 в LiveInternet

100 000 DAU

1 запрос в день

≈30 дней в месяце

100 000 × 30 × 45 965 = 137 895 000 000

137.895 Гб

0.522 ₽ за гигабайт

≈72 ₽ в месяц

100 000 000 DAU

≈72 000 ₽ в месяц

Скорость мобильного интернета

• EDGE — 0,2 Мбит/с, 1000 мс RTT;
• 3G — 1,0 Мбит/с, 600 мс RTT;
• 4G (LTE) — 2,0 Мбит/с, 220 мс RTT.

1 Мбит/с = 125 Кб/с

370 мс + 600 мс RTT =
970 мс

🤨 Манипуляция
числами

Отчасти 🙃

🧐 CSS?

<ul class="horizontal-media-scroller">
    <li>
        <a href="#">
            <figure>
                <picture>
                    <img alt="..." loading="lazy" src="..." />
                </picture>
                <figcaption>Image Caption</figcaption>
            </figure>
        </a>
    </li>
    <li>...</li>
</ul>

.horizontal-media-scroller {
    display: grid;
    grid-auto-flow: column;
    grid-gap: calc(var(--gap) / 2);

    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gap);
}

.horizontal-media-scroller figure {
    scroll-snap-align: start;
}

overscroll-behavior-x: contain;

scroll-snap-type: x mandatory;

scroll-snap-align: start;

45 965 − 993 = 44 972

⬇️ 97%

🤨 Опять манипуляция

☝️ Уточняйте требования заказчика

scroll-behavior: smooth;

🤨 А если sticky-шапка?

scroll-margin-top: 100px;

@media (prefers-reduced-motion: no-preference) {
    .smooth-scroll {
        scroll-behavior: smooth;
    }
}

2 709 − 93 = 2 616

⬇️ 96.5%

x.com/jh3yy

.pop {
    view-timeline-name: --pop;
}
img {
    animation: slide both;
    animation-timeline: --pop;
    animation-range: entry 100% cover 50%;
}
.skateboarder {
    --x: 0;
    --y: -45%;
}
@keyframes slide {
    to { translate: var(--x) var(--y); }
}

animation: some 2s linear infinite;

animation-name: some;
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;

2s = 100%

@keyframes grow-progress {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

#progress {
    position: fixed;
    left: 0; top: 0;
    width: 100%; height: 1em;
    background: red;

    transform-origin: 0 50%;
    animation: grow-progress auto linear;
    animation-timeline: scroll();
}

animation-timeline: scroll();

animation-timeline: scroll(nearest block);

.container {
    scroll-timeline-name: --scroll-timeline;
    scroll-timeline-axis: inline; /* or block */
}

.child {
    animation-timeline: --scroll-timeline;
}

.pop {
    view-timeline-name: --pop;
}
img {
    animation: slide both;
    animation-timeline: --pop;
    animation-range: entry 100% cover 50%;
}
.skateboarder {
    --x: 0;
    --y: -45%;
}
@keyframes slide {
    to { translate: var(--x) var(--y); }
}

Interop 2024

@keyframes detect-scroll {
    from, to { --can-scroll: ; }
}

.container {
    animation: detect-scroll linear;
    animation-timeline: scroll(self);

    --bg-if-can-scroll: var(--can-scroll) lime;
    --bg-if-cant-scroll: red;
    background: var(--bg-if-can-scroll, var(--bg-if-cant-scroll));
}

Кнопка «Корзины» не прилипает к низу!
Заказчик

.my-element {
    height: calc(var(--vh, 1vh) * 100);
}

const vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);

window.addEventListener('resize', () => {
    const vh = window.innerHeight * 0.01;
    document.documentElement.style.setProperty('--vh', `${vh}px`);
});

height: 100dvh;

🤔 CSS?

<a href="#img1">
    <img src="./small.jpg">
</a>

<a href="#" class="lightbox" id="img1">
    <span style="background-image: url('./large.jpg')"></span>
</a>

.lightbox {
    display: none;

    position: fixed;
    z-index: 999;
    top: 0; left: 0;
    right: 0; bottom: 0;

    background: rgba(0, 0, 0, 0.8);
}

.lightbox:target {
    display: block;
}

<article class="content" inert>
    <!-- content -->
</article>

<dialog open>
    Content
</dialog>

<dialog>
    <form method="dialog">
        <button>Close</button>
    </form>
</dialog>

dialog.showModal();

import * as Accordion from '@radix-ui/react-accordion';

() => (
    <Accordion.Root>
        <Accordion.Item>
            <Accordion.Header>
                <Accordion.Trigger />
            </Accordion.Header>
            <Accordion.Content />
        </Accordion.Item>
    </Accordion.Root>
);

🤔 CSS?

🙃 HTML

<details name=accordion>
    <summary>Exclusive</summary>
    <span>Some Text 1</span>
</details>
<details name=accordion>
    <summary>Accordion</summary>
    <span>Some Text 2</span>
</details>
<details name=accordion>
    <summary>Pattern</summary>
    <span>Some Text 3</span>
</details>

<details name="common-name">

animation-timing-function: linear(0, 1);

CSS.supports(
    'animation-timing-function',
    'linear(0, 1)'
)

🦥 Ленивая загрузка?

<img src="photo.jpg" loading="lazy">

<iframe src="frame.html" loading="lazy">

.panels {
    display: grid;
    grid-template-columns: auto 1fr; /* 👈 */
}

.resizer {
    max-width: 100cqi;
    overflow: hidden;
    resize: horizontal; /* 👈 */
}

📚 Знайте свои инструменты

🗞️ Будьте в курсе