Jdi na obsah Jdi na menu

Jak fungují CSS knihovny (frameworky)

Pokud se v oblasti vývoje webových stránek pohybujete už nějakou dobu, jistě jste se setkali s něčím čemu se říká CSS framework (česky knihovna). CSS knihoven je spousty - nejznámější je třeba Bootstrap.

► Poznámka: V tomto článku pojednávám o knihovnách napsaných v jazyce CSS, nikoli o JavaScriptových knihovnách - o nich se dozvíte v jiném článku.

Co to je CSS knihovna?

Je to jednoduché. CSS knihovna je vlastně CSS soubor uložený na nějakém serveru a pokud je to nějaká rozsáhlá knihovna, je k ní vypracovaná dokumentace.

Jaký je rozdíl mezi externím stylovým souborem na stejném serveru a knihovnou?

Téměř žádný. Pokud máte na serveru soubory se stylem, pravděpodobně máte v hlavičce tento kód:

<link rel="stylesheet" href="neco.css">

Kdežto pokud používáte právě CSS knihovnu, kód vypadá většinou nějak takto:

<link rel="stylesheet" href="https://cdn.neco.net/npm/neco/font/neco.min.css">

Použití stylů z externího serveru se dělá pomocí CDN.

Co to je CDN?

CDN je zkratka pro  Content Delivery Network - Síť pro doručení obsahu

Jedná se o registr souborů. Většinou se používají právě přes server daného CDN. 

Poskytovatel knihovny (většinou samotný vývojář) se do tohoto registru zaregistruje a nahraje své soubory.

CDN vypíše lokaci souboru na serveru (URL adresu) a vývojář ji poté zpřístupní v dokumentaci

Komplikace

Představte si následující situaci: máte vytvořenou knihovnu, dokumentaci a víte, že ji chcete zpřístupnit. Víte, jak tyto knihovny fungují.

Už jen prvním problémem je chování prohlížečů. V dnešní době se pravděpodobně nestane, že by prohlížeč nějaký element nezobrazil ale každý prohlížeč zobrazuje dané věci jinak. Skvělým příkladem je posuvník. Ten zobrazuje každý prohlížeč jinak. Jinak vypadá v Microsoft Edgi, Firefoxu nebo Safari a Google Chromu.

Jelikož právě prohlížeč Firefox vlastní technologický gigant Mozilla, v CSS existuje pro element posuvník samostatný identifikátor.

Proto je velmi důležité znát chování prohlížečů.

Dále, jak jsem již zmínil výše, na tuto záležitost se využívá CDN. A to je problém. Totiž hostovat framework je velmi náročné na výkon serveru. Proto zde existují placené, ale výkonné CDN služby jako je například jsDelivr, který používá například i populární framework Bootstrap.

Hostování na vlastním serveru

Tohle je opravdu špatný nápad, pokud máte malý a primitivní server. Samozřejmě, pokud budete mít 10-20 "žádostí - requestů" denně, Váš server to zvládne. Například CDN server jsDelivr má přes deset milionů requestů za hodinu což malý server neutáhne. Dalším problémem je geografická poloha. To je problém pokud chcete svůj framework poskytnout světu - pokud máte server v Evropě, v USA asi Váš framework nebude snadno dostupný.

Nejlepší způsob poskytování frameworku je proto přes CDN třetí strany.