HTML/CSS - ruší se řádkování textu
Dobrý den,
nejsem kodér ani programátor, nicméně mám svůj amatérský web, kde nyní dochází k chybě, kterou si nedokážu vysvětlit. Odstavce jsou nastaveny tak, aby byly psány 1,5tým řádkováním. Na PC zařízeních je vše v pořádku. Když se stránka zobrazí na mobilním zařízení, je vše také v pořádku, ale po "refresh" se řádkování promění na jednoduché. Tato chyba se objevuje u všech mobilních zařízení, u PC zařízení se neděje nikdy.
HTML vypadá takto:
<main>
<p>Zde je nějaký odstavec.</p>
</main>
CSS vypadá takto:
main p{color: black; text-align:justify; line-height:1.5em;}
Nenapadá někoho, v čem je problém? Předem děkuji za případné odpovědi.
Je to tým že font metron_light_pro_regular nerešpektuje defaultné user agent CSS u určitých tagov (vrátane <p>) ktorý obsahuje margin start/end/before/after a nerešpektuje ani line-height samotný. (Aha to už Vám tu poradili.)
Ovšem dodám k tej stránke trocha iného kecania, trocha kritiky. Za 1. som si všimol že načítanie tej stránky mi zhltne až 12.6MB, obrázky sťahujete v rozlíšení 1024x1024 aj keď je zobrazujete v rozlíšení 428x428, lazy-loading Vám asi nič nehovorí, díky tomu Load trvá pri emulácii Fast 3G so zakázaným cashom až 1.2 minúty (cashovanie taky poriešené nemáte), fakt nepochopím načo sa načitáva posledný obrázok zo Slidu v čase kdy ešte neni načítaný prvý obrázok. Stránka by nemala presiahnuť 1MB v prípade fotogalérie sa dá ešte rešpektovať 2-3MB, 12.6 MB je už ale sakra prehnane veľa. Docela nesprávny spôsob jak tie obrázky prepínate, a okrem toho ani nie sú normálne skomprimované. Favicona v rozlíšení 1550x1550 a ešte v PNG formáte je čo preboha? na čo také rozlíšenie když sa to zobrazuje v tabu v oblasti 32x32 pixelov, pre Splash Art v prípade PWA jakožto ikonové pozadie sa bežne používa len 256x256 alebo 512x512. Okrem toho, Vaša favicona nesie len jedno jediné rozlíšenie. Nepoužívate ani meta viewport, responzivita je len "tvrdé wrapovanie, a percentuálny size prvkov, na mobile by ma navigácia zabila, ani neviem koľko krát bych klikol na tlačítko Odkazy kdybych chcel kliknúť na Linka A. Obrázkom vždycky pridávajte alt atribút, pre obrázok ktorý nenesie obsah prázdny ale i tak ho tam majte (práve tak kde by mal byť prázny tak tam máte "CZECH" hodnotu. samotná stránka by mohla používať HTTPS. Cross-origin neporiešený, linky na externú doménu nenesú rel="noreferrer" ani rel="noopener", jinak meta keywords sú zbytočné, najčastejšie používané vyhladávače jako google, bing, yahoo, duckduckgo atp je ignorujú. linky s popiskom obsahujúce jedno " " je taky nezmysel. Ešte sa vrátim ku tým obrázkom čo sa Vám prepínajú nie úplne skrz slideovanie, u všetkých máte napísané veľkosti cez atribúty, odporúča sa nastavovať veľkosť skrz CSS, HTML by mal určovať len sémantiku, CSS zobrazenie. Okrem toho u obrázkov nikdy nemente obe rozmery skrz CSS, vyvarujete sa tým deformáciám obrázkov a vždy si zachovajú správny pomer strán. Ešte jednu chybu som našiel a to title jakožto tag nesúci textový obsah napsaný pred meta charset tagom, v rôznych prehliadačoch to môe spôsobiť to že sa budú zobrazovať na záložke otázniky, to nechcete. Je tam toho ešte omnoho viac, ale to už nie sú až tak vážne chyby. Hlavne tie obrázky poriešte, to by ste mali určite,... 1.2 minúty načitávať pár obrázkov je extrém. A ešte dodám že veľa krát opakujete rovnaké CSS vlastnosti pre rôzne selektory, alebo naopak, rovnaké selektory pre rôzne vlastnosti.
Bez urážky, nechci Tě nijak namíchnout.
Vůbec tomu nerozumím, ale trocha odstavců by nezaškodila.
Je to nepřehledné. Následná úprava bleskově napsaného sice zdržuje, ale členění textu je dost důležité i pro ty, co by tomu rozuměli.
OK, skrátim to o do zarážiek:
- zmenšite veľkosť stránky: 12.6MB a teda load time 1.2 minúty pri fast 3G je extrémne veľa (najmä když nemáte poriešené ani cashovanie).
- upravte obrázky na rozlíšenie v akom sa zobrazujú reálne na webstránke. Neco jako <img src="obrazok_v_4K_rozliseni" height="100" width="100"> je nesmysl.
- používajte komprimáciu.
- používajte atribút alt pri obrázkoch s hodnotami ktoré majú zmysel.
- favicona by najvhodnejšie mala byť vo formáte .ICO na to existujú online convertery z PNG.
- používajte rel="noreferrer" alebo rel="noopener" v prípade linkov smerujúcich na inú doménu.
- nepoužívajte stylovacie html atribúty, na stylovanie je CSS. (presne to čo je v druhej zarážke je špatne)
- nenastavujte v CSS natvrdo obe rozmery obrázku, vyvarujete sa deformáciám obrázkov a zachovajú si správny pomer strán.
- Používajte lazy-loading, je nesmysl načitávať posledný obrázok zo slidovania ktorý sa má zobraziť možno tak o 20 sekúnd, když ešte nieje načítaní ani prvý obrázok ktorý by sa mal zobraziť ako prvý.
- rozlíšenie 1550x1550 pre faviconu je nesmysl.
- linky obsahujúce v popisku &nbps; sú nesmysl, jediné &nbps; nahradiť medzerou, formátovanie neriešiť skrz tvrdé medzery.
- nepoužívať zbytočne rovnaké CSS vlastnosti pre rôzne selektory, alebo naopak, rovnaké selektory pre rôzne vlastnosti.
Tým myslím neco jako: "p {line height: 1.5"} p {font-size: 20px} p {...} nebo .uhorka {height: 20px} .mrkva {height: 20px} .pomaranc {height: 20px}
- meta charset písať pred title tagom a akýmkoľvek textovým obsahom, ideálne by mal byť vždy úplne prvý v heade.
- používať meta viewport.
- meta keyword sú zbytočné, vyhladávací boti to ignorujú.
- používajte HTTPS
Neviem či som napsal všetko.