Narazili jste někdy na problém, že jste museli zvýšit specificitu CSS selektoru, abyste přepsali nějaké pravidlo z frameworku nebo vlastního vzhledu (theme)?
Nejste jediný, a proto W3C přišlo v roce 2021 s návrhem kaskádových vrstem (Cascade Layers) a většina předních vývojářů (Chromium, Webkit i Mozilla) již pracují na co nejrychlejší implementaci.
Pokračování textu Kaskádové vrstvyHTML5 má jednu „skrytou“ vlastnost, o které se moc nemluví. Částečně proto, že pro nováčky je trochu matoucí a pro zkušení kodéry víceméně zbytečná. Mluvím o vlastnosti (atributu) hidden („skrytý„), který můžete nastavit na libovolný prvek a ten se pak bude chovat stejně jako s display:none.
V čem spočívá její smysl (a dalo by se říct i nesmysl)?
Pokračování textu Prvek skrytý pomocí HTML5Formulářové prvky mají ve všech prohlížečích předdefinovaný styl (podle OS) a je obtížné je změnit. Přitom požadavek na změnu vzhledu formulářů je jeden z nejčastějších při vývoji RIA (Rich Internet Application) nebo PWA (Progressive Web App).
Původní text: listopad 2017
Aktualizováno: březen 2022
Odpověď na otázku v titulku je velmi jednoduchá: AVIF a WEBP obrázky. Chcete vědět víc?
Tento článek navazuje na starší Jak na průhlednost obrázků? z roku 2015, který již není aktuální kvůli tomu, že popsané formáty obrázků již nejsou relevantní hlavně kvůli tomu, že všechny prohlížeče již podporují formát WEBP.
Pokračování textu Jaké použít obrázky v roce 2021?Jistě znáte CSS vlastnosti position a její hodnoty absolute a fixed. Ty byly před příchodem CSS Flexboxu a Gridu prakticky jedinou možností, jak umístit hlavičku a/nebo patičku stránky tak, aby nezmizela po tom, co uživatel posune obsah.
Nová hodnota sticky (česky lepkavý, nebo též otravný) umožňuje přilepit prvek k okraji okna, bez toho, aby tam byl trvale umístěný.
Pokud jste již používali Flexbox a/nebo Grid, jistě jste si všimli, že místo hodnot jako align:top nebo align:left používají hodnoty start a end. To je proto, že tyto nové návrhy již byly vytvořeny s přihlédnutím na logické vlastnosti místo dříve používaných fyzických vlastností.
A stejně jako Flexbox a Grid dochází k postupnému zavádění logických vlastností u dalších definic jako je padding, margin, text-align, atd.
Když uživatel posouvá stránku, málokdy se mu povede, že posun skončí přesně na začátku odstavce nebo obrázku, což pak zhoršuje UX (dojem ze stránky). Do teď se podobné situace řešili pomocí javaskriptu, ale kombinace JS a skrolování většinou UX ještě zhorší.
Díky nové CSS specifikaci Scroll snap můžete tyto situace vyřešit automaticky jen pomocí CSS definice.
Pokračování textu Posun obsahu se zachytávánímCSS vlastnost border-radius umožňuje nastavit prvku kulaté okraje. To, zda používat kulaté rohy u tlačítek, se mění stejně jako barva modního dámského oblečení, ale border-radius se dá použít i na mnohem více věcí.
Zarovnání textu na střed není (doufám) problém; stačí použít:
.center { text-align: center; }
Problém ale nastane, pokud chceme zarovnat kontejner uvnitř jiného kontejneru.
Pokračování textu Zarovnání na střed v kontejneruNavrhovat web ve Photoshopu je špatný nápad, ale když váš grafik s ničím jiným neumí dělat, nemáte na výběr. V takovém případě ale existuje řada věcí, kterým by se měl grafik vyhnout nebo je naopak vzít v úvahu, aby bylo možné jeho práci použít pro vytvoření webové stránky.