Logik in CSS schreiben

Hinweis: Ich habe gerade den Text unten übersetzt und hier gepostet. Referenzen finden Sie am Ende dieses Artikels.

CSS ist eine hochspezialisierte Programmiersprache, die sich auf Stilsysteme konzentriert. Aufgrund dieses einzelnen Anwendungsfalls und seines deklarativen Charakters ist er manchmal schwer zu verstehen. Manche Leute leugnen sogar, dass es sich um eine Programmiersprache handelt. Beweisen wir ihnen das Gegenteil, indem wir ein intelligentes und flexibles Stilsystem programmieren.

Kontrollstrukturen

Traditionellere und allgemeinere Sprachen (wie JavaScript) bieten uns Tools wie „Bedingungen“ (wenn/dann), „Schleifen“ (für, während), „Logische Gatter“ (===, && usw.). .) und „Variablen“. Diese Strukturen werden in CSS unterschiedlich benannt, ihre Syntax ist sehr unterschiedlich, um dem spezifischen Anwendungsfall der Gestaltung eines Dokuments besser gerecht zu werden, und einige von ihnen waren bis vor ein paar Jahren einfach nicht in CSS verfügbar.

Variablen

Variablen sind am einfachsten. Sie werden in CSS Benutzerdefinierte Eigenschaften genannt (obwohl jeder sie sowieso Variablen nennt, sogar in seiner eigenen Syntax).

:root {
    --color: red;
}
span {
    color: var(--color, blue);
}

Der doppelte Bindestrich deklariert eine Variable und weist einen Wert zu. Dies muss in einem Bereich geschehen, da dies außerhalb eines Selektors die CSS-Syntax beschädigen würde. Beachten Sie den :root-Selektor, der als globaler Bereich fungiert.

Bedingungen

Bedingungen können auf verschiedene Arten geschrieben werden, je nachdem, wo Sie sie verwenden möchten. Selektoren haben einen Bereich für ihre Elemente, Medienabfragen haben einen globalen Geltungsbereich und benötigen ihre eigenen Selektoren.

Attributselektoren:

[data-attr='true'] {
    /* if */
}
[data-attr='false'] {
    /* elseif */
}
:not([data-attr]) {
    /* else */
}

Pseudoklassen

:checked {
    /* if */
}
:not(:checked) {
    /* else */
}

Medienanfragen:

:root {
    color: red; /* else */
}
@media (min-width > 600px) {
    :root {
        color: blue; /* if */
    }
}

Schleifen

Zähler sind die direkteste Form von Schleifen in CSS, aber auch die mit dem am stärksten eingeschränkten Anwendungsfall. Sie können Zähler nur für die Inhaltseigenschaft verwenden und diese als Text anzeigen. Sie können Ihr „Inkrement“, Ihren „Startpunkt“ und Ihren „Wert“ jederzeit anpassen, die Ausgabe ist jedoch immer auf Text beschränkt.

main {
    counter-reset: section;
}

section {
    counter-increment: section;
    counter-reset: section;
}

section > h2::before {
    content: 'Headline ' counter(section) ': ';
}

Aber was wäre, wenn Sie eine Schleife verwenden möchten, um ein wiederkehrendes Layoutmuster zu definieren? Diese Art von Schleife ist etwas unklarer: Es handelt sich um die automatische Fülleigenschaft von Rastern.

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

Dadurch wird das Raster mit so vielen Elementen gefüllt, wie hineinpassen. Dabei werden sie skaliert, um den verfügbaren Platz auszufüllen, aber bei Bedarf in mehrere Zeilen aufgeteilt. Der Vorgang wiederholt sich, solange Rasterelemente gefunden werden, und beschränkt sie auf eine Mindestbreite von 300 Pixel und eine maximale Breite von einem Bruchteil der Größe ihres Rastercontainers. Es ist wahrscheinlich einfacher zu sehen als zu erklären:

Und schließlich gibt es noch „Schleifenselektoren“. Sie gehen von einem Argument aus, das eine sehr präzise auszuwählende Formel sein kann.

section:nth-child(2n) {
    /* seleciona todos os elementos pares */
}

section:nth-child(4n + 2) {
    /* seleciona a cada quarto items, iniciando a partir do segundo */
}

Für ganz besondere Fälle können Sie :nth-child() mit :not() kombinieren, wie:

section:nth-child(3n):not(:nth-child(6)) {
    /* seleciona a cada 3 elementos, mas não o sexto elemento */
}

Sie können :nth-child() durch :nth-of-type() und :nth-last-of-type() ersetzen, um den Umfang dieser letzten Beispiele zu ändern.

Logikgatter

Ana Tudor hat einen Artikel über CSS Logic Gates geschrieben. Login Gates arbeitet an der Idee, Variablen mit calc zu kombinieren. Anschließend modelliert und animiert sie damit weiter 3D-Objekte. Es hört sich wie arkane Magie an, wird aber im Laufe des Artikels noch viel verrückter und ist im Allgemeinen eine der besten Erklärungen dafür, warum CSS tatsächlich eine Programmiersprache ist.

Techniken

Der Eulenselektor

* + * {
    margin-top: 1rem;
}

Owl Selector wählt jedes Element aus, das auf ein Element folgt. Das Anwenden eines margin-top darauf fügt effektiv eine Lücke zwischen den Elementen hinzu, wie dies bei „grid-gap“ der Fall ist, jedoch ohne das Rastersystem. Dies bedeutet auch, dass es anpassbarer ist. Sie können Ihren Rand oben überschreiben und an jede Art von Inhalt anpassen. Möchten Sie 1 Rem Abstand zwischen jedem Element, aber 3 Rem vor einem Titel haben? Dies ist mit einem Eulen-Selektor einfacher zu bewerkstelligen als mit einem Raster.

Kevin Pennekamp hat einen ausführlichen Artikel dazu geschrieben, der sogar seinen Algorithmus im Pseudocode erklärt.

Conditional Styling

Podemos criar toggles em nosso código css que ligam e desligam certas regras com variables ​​e calc. Isso nos dá condições muito versáteis.

.box {
    padding: 1rem 1rem 1rem calc(1rem + var(--s) * 4rem);
    color: hsl(0, calc(var(--s, 0) * 100%), 80%);
    background-color: hsl(0, calc(var(--s, 0) * 100%), 15%);
    border: calc(var(--s, 0) * 1px) solid hsl(0, calc(var(--s, 0) * 100%), 80%);
}

.icon {
    opacity: calc(var(--s) * 100%);
    transform: scale(calc(var(--s) * 100%));
}

Dependendo do valor de --s, .box habilitará ou desabilitará seus alert styles.

Automatic contrast colors

Vamos levar a mesma lógica um passo adiante e criar uma color variable que depende do seu contraste com a background color:

:root {
    --theme-hue: 210deg;
    --theme-sat: 30%;
    --theme-lit: 20%;
    --theme-font-threshold: 51%;

    --background-color: hsl(var(--theme-hue), var(--theme-sat), var(--theme-lit));

    --font-color: hsl(
        var(--theme-hue),
        var(--theme-sat),
        clamp(10%, calc(100% - (var(--theme-lit) - var(theme-font-threshold)) * 1000), 95%)
    );
}

Este snippet calcula um background color a partir de valores HSL e uma font color black ou white, invertendo o valor de lightness (luminosidade) do background. Isso por si só pode resultar em baixo contraste de cor (uma fonte cinza de 40% em um background cinza de 60% é praticamente ilegível), então subtrairei um valor threshold (o ponto em que a cor muda de white para black), multiplicarei por um valor insanamente alto como 1000 e farei clamp nele entre 10% e 95%, para obter uma porcentagem de lightness válida no final. Tudo é controlável editando as quatro variáveis ​​no início do snippet.

Este método também pode ser usado para escrever lógica de cores intrincada e themes automáticos, com base apenas em valores HSL.

Limpando as stylesheets

Vamos combinar o que temos até agora para limpar a stylesheet. Ordenando tudo por viewports parece um pouco espaguete, mas ordenar isso por componente não parece nada melhor. Com variables, podemos ter o melhor dos dois mundos:

/* define variables */
:root {
    --paragraph-width: 90ch;
    --sidebar-width: 30ch;
    --layout-s: "header header" "sidebar sidebar" "main main" "footer footer";
    --layout-l: "header header" "main sidebar" "footer footer";
    --template-s: auto auto minmax(100%, 1fr) auto /
        minmax(70%, var(--paragraph-width)) minmax(30%, var(--sidebar-width));
    --template-l: auto minmax(100%, 1fr) auto /
        minmax(70%, var(--paragraph-width)) minmax(30%, var(--sidebar-width));
    --layout: var(--layout-s);
    --template: var(--template-s);
    --gap-width: 1rem;
}

/* manipula variables por viewport */
@media (min-width: 48rem) {
    :root {
        --layout: var(--layout-l);
        --template: var(--template-l);
    }
}

/* realiza o bind no DOM */
body {
    display: grid;
    grid-template: var(--template);
    grid-template-areas: var(--layout);
    grid-gap: var(--gap-width);
    justify-content: center;
    min-height: 100vh;
    max-width: calc(
        var(--paragraph-width) + var(--sidebar-width) + var(--gap-width)
    );
    padding: 0 var(--gap-width);
}

Todas as global variables são definidas no topo e ordenadas por viewport. Essa seção efetivamente se torna a Definition of Behavior, esclarecendo questões como:

• Quais aspectos globais da stylesheet temos? Estou pensando em coisas como font size, colors, medidas repetidas, etc.
• Quais aspectos que mudam frequentemente nós temos? Container widths, Grid layouts e similares vêm à mente.
• Como os valores devem mudar entre as viewports? Quais global styles se aplicam a qual viewport?

Abaixo estão as definições de regras, ordenadas por componente. As Media Queries não são mais necessárias aqui, porque elas já estão definidas no topo e colocadas em variables. Podemos simplesmente codificar em nossas stylesheets sem interrupções neste ponto.

Leando o hash parameter

Um caso especial de pseudo classes é o :target selector, que pode ler o hash fragment da URL. Aqui está uma demonstração que usa essa mecânica para simular uma experiência semelhante a SPA:

Eu escrevi um post sobre isso. Só esteja ciente de que isso tem algumas implicações sérias de acessibilidade e precisa de alguma mecânica JavaScript para realmente ser livre de barreiras. Não faça isso em um live environment.

Definindo Variables ​​em JavaScript

Manipular CSS variables se tornou uma ferramenta muito poderosa agora. Também podemos aproveitar isso em JavaScript:

    // configura --s em :root
    document.documentElement.style.setProperty('--s', e.target.value);

    // configura --s scoped para #myID
    const el = document.querySelector('#myID');
    el.style.setProperty('--s', e.target.value);

    // lê variables de um element
    const switch = getComputedStyle(el).getPropertyValue('--s');

Os exemplos de codepen acima funcionam exatamente assim.

Resumo

CSS é muito capaz de definir layout systems inteligentes e reativos. Suas estruturas de controle e algoritmos podem ser um pouco estranhos em comparação com outras linguagens, mas eles estão lá e estão à altura da tarefa. Vamos parar de apenas descrever alguns styles e começar a fazer eles funcionar.

Fonte

Artigo escrito por Daniel Schulz

Das obige ist der detaillierte Inhalt vonLogik in CSS schreiben. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!