7 věcí, o kterých jste nevěděli, že můžete dělat s CSS

CSS a JavaScript, věřte nebo ne, se začínají překrývat, protože CSS přidává více funkcí. Když jsem napsal 5 způsobů interakce CSS a JavaScriptu, o kterých možná nevíte, lidé byli překvapeni, jak se CSS a JavaScript překrývají. Dnes zdůrazním sedm úkolů, které můžete provést pomocí CSS – nepotřebujete žádný JavaScript ani obrázky!

CSS @podporuje

Každý dobrý front-end vývojář nejprve otestuje funkce, které prohlížeč nemusí mít. Testování funkcí se vždy provádělo pomocí JavaScriptu a mnoho lidí k testování těchto funkcí používá Modernizr, působivý nástroj plný spousty dobře otestovaných rutin. Přišlo však nové rozhraní API, které vám umožní provádět testy funkcí pomocí CSS: @supports. Zde je několik příkladů @supports funguje:

/* basic usage */
@supports(prop:value) {
	/* more styles */
}

/* real usage */
@supports (display: flex) {
	div { display: flex; }
}

/* testing prefixes too */
@supports (display: -webkit-flex) or
          (display: -moz-flex) or
          (display: flex) {

    section {
      display: -webkit-flex;
      display: -moz-flex;
    	display: flex;
    	float: none;
    }
}

Tento nový @supports funkce, která má také protějšek JavaScriptu, je již dávno za námi a můžeme se těšit na její brzké použití!

Filtry CSS

Napište službu, která upraví barevné odstíny obrázku a můžete jej prodat Facebooku za miliardu dolarů! To je samozřejmě přílišné zjednodušení, ale psaní obrázkových filtrů není žádná věda. Svůj první týden v Mozille jsem napsal malou aplikaci (která vyhrála soutěž, BTW...just sayin'), která používala nějakou matematiku založenou na JS k vytváření obrazových filtrů s plátnem, ale dnes můžeme vytvářet obrazové filtry pouze pomocí CSS!

/* simple filter */
.myElement {
	-webkit-filter: blur(2px);
}

/* advanced filter */
.myElement {
	-webkit-filter: blur(2px) grayscale (.5) opacity(0.8) hue-rotate(120deg);
}

Tento typ filtrování pouze maskuje původní zobrazení obrázku a neukládá ani neexportuje obrázek s uvedeným filtrem, ale je skvělý pro fotogalerie nebo kdekoli jinde, kde chcete obrázku přidat odlesk!

Zobrazit ukázku

Události ukazatele a přetržitá kliknutí

CSS pointer-events vlastnost poskytuje způsob, jak efektivně zakázat prvek, a to natolik, že kliknutí na odkaz nespustí událost kliknutí prostřednictvím JavaScriptu:

/* do nothing when clicked or activated */
.disabled { pointer-events: none; }
/* this will _not_ fire because of the pointer-events: none application */
document.getElementById("disabled-element").addEventListener("click", function(e) {
	alert("Clicked!");
});

Ve výše uvedeném příkladu se událost kliknutí ani nespustí kvůli CSS pointer-events hodnota. Považuji to za obrovskou užitečnost, protože nemusíte všude provádět kontroly className nebo atributů, abyste zjistili, zda je něco zakázáno.

Zobrazit ukázku

Posunout dolů a nahoru

CSS nám umožňuje vytvářet přechody a animace, ale často potřebujeme knihovny JavaScriptu, které nám pomohou s úpravou několika věcí a ovládáním animace. Jednou z takových populárních animací je efekt posunutí nahoru a dolu, o kterém většina lidí neví, že jej lze provést pouze pomocí CSS!

/* slider in open state */
.slider {
	overflow-y: hidden;
	max-height: 500px; /* approximate max height */

	transition-property: all;
	transition-duration: .5s;
	transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}

/* close it with the "closed" class */
.slider.closed {
	max-height: 0;
}

Chytré využití max-height umožňuje prvku růst a zmenšovat se podle potřeby.

Zobrazit ukázku

Počítadla CSS

Vždy se budeme smát nad tím, co výraz „počítadlo“ na internetu znamená, ale počítadla CSS jsou něco úplně jiného. Čítače CSS umožňují vývojářům zvýšit čítač a zobrazit jej pomocí :before nebo :after pro daný prvek:

/* initialize the counter */
ol.slides {
	counter-reset: slideNum;
}

/* increment the counter */
ol.slides > li {
	counter-increment: slideNum;
}

/* display the counter value */
ol.slides li:after {
	content: "[" counter(slideNum) "]";
}

Čítače CSS se často používají v prezentacích na konferencích a dokonce i v seznamech, jako je obsah.

Zobrazit ukázku

Unicode CSS třídy

Existuje spousta dokumentů s doporučenými postupy CSS a všechny začnou tím, jak pojmenovat třídy CSS. To, co nikdy neuvidíte, je jeden z těch dokumentů, které vám říkají, abyste k pojmenování tříd používali symboly unicode:

.ಠ_ಠ {
	border: 1px solid #f00;
	background: pink;
}

.❤ {
	background: lightgreen;
	border: 1px solid green;
}

Prosím, nepoužívejte tyto. Prosím. ALE MŮŽETE!

Zobrazit ukázku

Kruhy CSS

Trojúhelníky CSS jsou skvělý trik, ale také kruhy CSS. Zneužíváním CSS border-radius , můžete vytvořit dokonalé kruhy!

.circle {
	border-radius: 50%;
	width: 200px;
	height: 200px; 
	/* width and height can be anything, as long as they're equal */
}

Do svých kruhů můžete přidat přechody a můžete je dokonce otočit pomocí animací CSS! CSS přichází s jednotnějším rozhraním API pro tvary, ale nyní můžete pomocí tohoto hacku vytvářet kruhy!

Zobrazit ukázku

Tady to máte: sedm věcí, které můžete dělat s CSS a které vás možná překvapí. Některé jsou docela užitečné, několik jsou spíše okrajové případy. Dejte mi vědět, jestli jsem zmeškal úžasný úkol CSS, který často používáte!