CSS — язык программирования

CSS 🆚 JS

2009

CSS + HTML = ❤️

CSS + HTML = 💰

2019

«Я программист,
CSS пусть верстальщики пишут»
(c) Кто-то в Интернете

Как попасть на FrontendConf?

Разместить элемент по центру

// псевдокод
var container = getContainer();
var containerSize = container.getSize();
var containerPosition = container.getPosition();

var element = getElement();
var elementSize = element.getSize();

var x = (containerSize.width - elementSize.width) / 2;
var y = (containerSize.height - elementSize.height) / 2;

element.setPosition(
    containerPosition.x + x,
    containerPosition.y + y
);

Разместить элемент по центру

.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

CSS — декларативный ✅

CSS — DSL ✅

clip-path: circle(25%);

class ClipPath final : public Longhand {
  public:
    constexpr ClipPath() : Longhand(CSSPropertyID::kClipPath, kInterpolable | kProperty, '\0') { }
    const char* GetPropertyName() const override;
    const WTF::AtomicString& GetPropertyNameAtomicString() const override;
    const char* GetJSPropertyName() const override;
    const CSSValue* ParseSingleValue(
        CSSParserTokenRange&,
        const CSSParserContext&,
        const CSSParserLocalContext&
    ) const override;
    const CSSValue* CSSValueFromComputedStyleInternal(
        const ComputedStyle&,
        const SVGComputedStyle&,
        const LayoutObject*,
        bool allow_visited_style
    ) const override;
    void ApplyInitial(StyleResolverState&) const override;
    void ApplyInherit(StyleResolverState&) const override;
    void ApplyValue(StyleResolverState&, const CSSValue&) const override;
};

display: grid;

Полифил:
6684 строчки JS-кода 😱

Высокоуровневый? 🤷‍♂️

Критерии Тьюринг-полноты

• Фиксированное описание ✅
• Всегда достаточный объём доступной памяти ✅
• Неограниченность времени выполнения ✅
• Возможность функциональной композиции ✅
• Возможность каким-то образом подавать сигнал о результатах выполнения ✅
• Поддержка входных и выходных данных (I/O) ✅
• Наличие циклов while с прерыванием или эквивалентных им конструкций ❌

CSS — Тьюринг-полный ❌

Правило 1️⃣1️⃣0️⃣

Rule 110
in CSS/HTML/Human

input:not(:checked) + input:checked + input:checked
+ * + * + * + * + * + * + * + * + * + * + *
+ * + * + * + * + * + * + * + * + * + * + * {
    --cell-bg-color: hotpink;
    --cell-num-color: white;
    --cell-content: "X";
    --cell-cursor: pointer;
}

HTML + CSS —
Тьюринг-полный ✅

Задача: разместить элемент по центру контейнера.

Инструкции:

.center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

CSS — язык программирования ✅

Спасибо за внимание!

Что с этим делать?

Программирование
⬇️
CSS

Мы — программисты прямоугольников! 💪

border-style: SOLID

Плохо ❌

.promo {
    display: block;
    padding: 20px;
    margin-bottom: 20px;
    background-color: #09f;
    color: #fff;
    text-shadow: 0 0 1px rgba(0,0,0,0.25);
    border-radius: 4px;
}

Хорошо ✅

.island {
    display: block;
    padding: 20px;
    margin-bottom: 20px;
}

.promo {
    background-color: #09f;
    color: #fff;
    text-shadow: 0 0 1px rgba(0,0,0,0.25);
    border-radius: 4px;
}

TDD

• Создание теста — макет дизайнера
• Написание кода под этот тест — вёрстка
• Рефакторинг кода — Pixel Perfect

Скорость разработки 😃

Технический долг 💩

Hermione

npm install -g hermione

@mixin block($w, $h, $d, $x, $y, $z, $color, $angle: '0, 0, 0, 0') {
    transform: translate3d($x, $y, $z) rotate3d(#{$angle});
    will-change: transform;

    .front { @include front($w, $h, $d, $color); }
    .back { @include back($w, $h, $d, $color); }
    .right { @include right($w, $h, $d, darken($color, 10%)); }
    .left { @include left($w, $h, $d, darken($color, 10%)); }
    .top { @include top($w, $h, $d, darken($color, 5%)); }
    .bottom { @include bottom($w, $h, $d, darken($color, 5%)); }
}

:root {
    --r: 255;
    --g: 20;
    --b: 147;
    --primary-color: rgb(var(--r), var(--g), var(--b));
}

.my-element {
    --e-width: 200px;
    --e-border-width: 20px;
    background-color: var(--primary-color);
    width: calc(var(--e-width) + var(--e-border-width));
}

<div class="one two">I have 40px margin</div>

:root {
    --root-offset: 20px;
}
.one {
    --offset: 40px;
}
.two {
    margin: var(--offset, var(--root-offset, 30px));
}

<div class="two">I have 20px margin</div>

:root {
    --root-offset: 20px;
}
.one {
    --offset: 40px;
}
.two {
    margin: var(--offset, var(--root-offset, 30px));
}

Логическое И

.animal {
    --has-mustache: 1;
    --has-paws: 1;
    --has-tail: 1;

    --has-documents: calc(
        var(--has-mustache, 0) *
        var(--has-paws, 0) *
        var(--has-tail, 0)
    );
}

Логическое НЕ

.language {
    --undefined-is-not-a-function: 1;

    --is-js: var(--undefined-is-not-a-function, 0);
    --is-css: calc(
        1 - var(--is-js)
    );
}

Логическое ИЛИ

.human {
    --can-frontend: 1;
    --can-backend: 0;

    --is-developer: calc(
        var(--can-frontend) * var(--can-backend) +
        var(--can-frontend) * (1 - var(--can-backend)) +
        (1 - var(--can-frontend)) * var(--can-backend)
    );
}

Метод Квайна

⬇️

Логическое ИЛИ

.human {
    --can-frontend: 1;
    --can-backend: 0;

    --is-developer: calc(
        var(--can-frontend) +
        (1 - var(--can-frontend)) * var(--can-backend)
    );
}

Логическое ИЛИ с хаком

.human {
    --can-frontend: 1;
    --can-backend: 0;

    --is-developer: clamp(
        0,
        calc(var(--can-frontend) + var(--can-backend)),
        1)
    );
}

clamp()

width: clamp(10px, 4em, 80px);
width: max(10px, min(4em, 80px));

max()

Логическое ИЛИ через И и НЕ

.human {
    --can-frontend: 1;
    --can-backend: 0;

    /* not (A or B) = (not A) and (not B) */
    --is-developer: calc(1 -
        (1 - var(--can-frontend)) * (1 - var(--can-backend))
    );
}

Rule 110 for CSS+HTML

😎

Хороший алгоритм решения проблемы

1. воспроизвести проблему;
2. локализовать ошибку;
3. исправить ошибку;
4. протестировать;
5. избежать повторения в будущем;
6. отдать тестировщику.

Как хорошо вы знаете CSS? 👨🏼‍🏫

Даны следующие классы:

.red { color: red; }
.blue { color: blue; }

Какого цвета должны быть эти дивы?

<div class="red blue">
<div class="blue red">

<b style="background: #0B2429;
          color: #F3AC3C;
          zoom: 200;
          left: -5.59px;
          top: -8.3px;
          position: absolute">k

CSS на GPU ⚡️

A search engine in CSS
demo

#input[value='l'i] ~ #results #result55,
#input[value='la'i] ~ #results #result55,
#input[value='lau'i] ~ #results #result55,
#input[value='laur'i] ~ #results #result55,
#input[value='laura'i] ~ #results #result55 {
    display: block;
}

#option[id]:checked ~ #results #result12,
#option[id]:checked ~ #results #result55 {
    display: block;
}

body {
    font-family: sans-serif;
}
h1, p {
    font-family: "no-parens", sans-serif;
}

/* https://github.com/adobe-fonts/adobe-blank */
@font-face {
    font-family: no-parens;
    src: url("...");
    unicode-range: U+0028, U+0029; /* () */
}

Houdini 🔮

CSS.registerComputedValueHook({
    inputProperties: ["transform", "--slide-*"],
    outputProperties: ["transform"],
    computedValue: function(input, output) {
        const tx = input.get("--slide-x");
        const ty = input.get("--slide-y");
        const translate = new CSSTranslate(tx, ty);
        output.set("transform",
            new CSSTransformValue(
                translate,
                ...input.get('transform')
            )
        );
    }
});

CSS.registerFunction({
    "name": "--darken",
    "inputArguments": ["<color>", "<percentage>"],
}, (color, percent) => {
    const newColor = color.toHSL();
    newColor.lightness *= (1 - percent.value/100);
    return newColor;
});

.element {
    color: --darken(tomato, 12%);
}

CSS.registerFunction(
    {
        "name": "--random",
        "per": "element",
    },
    () => CSS.number(Math.random())
);

JS-in-CSS 👀

CSS Properties and Values
API

:root {
    --sidebar-width: 400px;
}

.closed {
    --sidebar-width: 80px;
}

body {
    transition: --sidebar-width 1s;
}

// JavaScript
CSS.registerProperty({
    name: '--sidebar-width',
    syntax: '<length>',
    inherits: true,
    initialValue: '80px'
});

/* CSS */
@property --sidebar-width {
    syntax: "<length>",
    inherits: true,
    initialValue: "80px"
}

Möbius bars with Houdini magic

Псевдоэлементы

• ::after (:after)
• ::before (:before)
• ::first-letter (:first-letter)
• ::first-line (:first-line)
• ::selection
• ::cue (:cue)
• ::slotted()

Псевдоэлементы 🧪

• ::placeholder
• ::marker
• ::backdrop
• ::part()
• ::grammar-error
• ::spelling-error

Cinema Seat Preview demo

CSS —
удобный инструмент

Лучше разобраться и заработать 💰,
чем ругать