CSS: 11 tipů a triků

25. 10. 2020

Některé jsou více známé, některé méně a některé jsou nové. 11 CSS tipů a triků, které se můžou hodit.

1. Výběr sousedícího sourozence (selektor “+”)

Plus selektor vybere sousedícího sourozence na stejné úrovni a se stejným rodičem.

Use case: Drobečková navigace kde chceme css dividerem (například pseudotřídou before) oddělit položky od sebe, ale zároveň chceme vynechat insert pseudotřídy pro první prvek.

HTML

<p>a</p>
<p>b</p>
<p>c</p>

CSS

p + p {
   background-color: #f42956;
}

2. Element zcela vyplňující rodiče

Pokud chceme zcela vyplnit vnitřek určitého elementu jiným elementem (potomkem) můžeme tak učinit následující konstrukcí bez potřeby znalosti rozměru rodiče.

Use case: Efekt ztmavení stránky za modálním oknem. Hover efekt fotografie ve fotogalerii.

HTML

<div class="a">
   <div class="b"></div>
</div>

CSS

.a {
    position: relative;
    width: 500px;
    height: 500px;
}

.b {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #f42956;
}

3. Vložení obrázku pomocí vlastnosti “content”

HTML

<div></div>

CSS

div:before {
    content: url("https://www.lukashron.cz/media/images/1920/1600521828_221221.jpg");
}

4. Rozložení textu do předem definovaného počtu sloupců

HTML

<p>
Nullam sit amet magna in magna gravida vehicula. Aliquam ante. Nemo enim ipsam voluptatem quia voluptas sit aspernatur
aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Ut tempus purus at lorem.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Et harum quidem rerum facilis est et expedita distinctio.
In enim a arcu imperdiet malesuada. Integer malesuada. Nam quis nulla. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Nam sed tellus id magna elementum tincidunt. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos hymenaeos. Duis condimentum augue id magna semper rutrum. In convallis.
Quisque tincidunt scelerisque libero. Maecenas lorem. Integer in sapien. Etiam dictum tincidunt diam. Aenean placerat. Nulla est.
Integer in sapien. Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum
qui dolorem eum fugiat quo voluptas nulla pariatur? Nullam dapibus fermentum ipsum. Vivamus porttitor turpis ac leo. Fusce wisi.
Sed convallis magna eu sem. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias
consequatur aut perferendis doloribus asperiores repellat. In dapibus augue non sapien.
</p>

CSS

p {
    columns:3;
}

5. Výběr prvního znaku ze začátku odstavce

HTML

<p>Nullam sit amet magna in magna gravida vehicula. Aliquam ante.</p>

CSS

p:first-letter {
    font-size: 2rem;
    color: #f42956;
}

6. Nativní smooth scroll bez JS?

Elegantní a jednoduchá náhrada mnohdy komplikovaných JS řešení často využívaných především na onepage layoutech.

CSS

html {
    scroll-behavior: smooth
}

7. Selektor :target

CSS3 pseudo-třída pro řešení například “tabs” konstrukcí. Vlastnost bohužel neudržuje fixní pozici a je zapotřebí tento problém řešit některým JS nebo CSS hackem.

HTML

<a href="#tab-one">Tab 1</a>
<a href="#tab-two">Tab 2</a>

<div id="tab-one">Tab one</div>
<div id="tab-two">Tab two</div>

CSS

:target {
    display: block;
}

div {
    display: none;
    width: 500px;
    height: 500px;
    background-color: #f42956;
}

8. Stín obtékající hranice prvku uvnitř obrázku s transparentním pozadím

Filtrem drop-shadown můžete definovat stín obrázku s transparentním pozadím, aby obtékal vnitřní prvky obrázku a nikoliv samotný rám vloženého média.

CSS

.png {
    filter: drop-shadow(0px 0px 15px rgba(0,0,0,.6));
}

9. Vlastnost content-visibility

Vlastností content-visibility s hodnotou auto lze zavěsit na prvky, které chceme vyrendrovat až v moment kdy to bude opravdu potřeba a tím v některých případech značně zrychlit vykreslení stránky.

10. CSS proměnné a propojení s JS

Dnes již můžete používat proměnné podobně, tak jak je můžete znát z některých programovacích jazyků. Získáte tím například možnost ovlivnit samotné vlastnosti třídy pomocí JS.

Use case: Možnost přepínání tmavého a světlého tématu aplikace. Možnost nastavit vlastní velikost písma (přístupnost). Aktivní design ovlivňovaný JS. Komplexnější ovlivňování samostatných vlastností tříd v media rules.

CSS

:root {
    --color-main: #f42956;
}

div {
    background-color: var(--color-main);
}

Získání a ovlivňování proměnných v JS

// Zmena hodnoty
document
    .documentElement
    .style
    .setProperty('--color-main', '#000000');

// Ziskani hodnoty
var color = getComputedStyle(document.documentElement)
    .getPropertyValue('--color-main')
    .trim();

// Ziskani hodnoty v jQuery
var color = var mainColor = $('html').css('--color-main').trim();

11. Vlastní atribut elementu

Jednoduché označení prvku vlastním atributem v některých případech může značně ulehčit práci, ale zároveň je třeba se držet v rozumných limitech a spíše využívat obecné atributy.

HTML

<article>one</article>
<article t>two</article>
<article>three</article>

CSS

article[t] {
    background-color: #f42956;
}

Nejnovější příspěvky