Incarcarea stilurilor

Ce se intampla cu testul in timp ce incarca un font? Nu va surprinde sa aflati ca acesta este un alt domeniu in care comportamentul browserelor difera. Exista doua principale abordari.

Afisarea solutiilor de rezerva pana la incarcarea fonturilor: Aceasta este abordarea adopdata de IE9, Opera si de mai vechile versiuni Firefox. Textul este afisat imediat, folosind primul font cat mai repede disponibil din declaratia CSS font-family. Pe masura ce fonturile sunt descarcate, afisarea este actualizata. Aceasta metoda prezinta utilizatorilor continutul asteptat cat mai curand posibil, dar comutarea fonturilor poate fi destul de neplacuta vizual.

Ascunderea textului pana la afisarea solutiilor: Aceasta este o abordare adoptata de catre browserele WebKit: Safari si Chrome...

Vezi articol

Fonturile si aspectele legale

Eliminarea unor caractere dintr-un font este o modalitate foarte buna de a reduce dimensiunile sale. Cu toate acestea, contravine termenilor si condiitolor celor mai multe fonturi comerciale. Acest lucru se datoreaza catorva repere legale care dicteaza modul in care fonturile sunt protejate de lege.

In vremurile cand fonturile erau bazate pe imagini bitmap, legislatia clasifica fonturile ca facand parte din categoria “Design Industrial”, fara a face obiectul dreptului de autor. Acest lucru a fost valabil si pentru fonturile vectoriale, cu exceptia cazului in care designul este cu adevarat inedit, situatie in care acestea pot fi acoperite printr-un brevet de design. In schimb, producatorii au ales sa protejeze instructiunile de vectorizare ca si cum ar fi programe de calculator...

Vezi articol

Suport nativ pentru fonturile web

Din fericire, este disponibila o solutie. Putem trimite fontul la utilizator si sa-l facem sa fie afisat cum era de asteptat! Se ia doar un font in format TrueDoc si se face acest lucru:

<head><link rel=”FONTDEF” src=”some-true-doc-font.pfr”></head>

<body><font face=”some-font”>Yey fonts!</font></body>

Cel putin, aceasta a fost solutia din Netscape Navigator 4, dar, de asemenea, aceasta a functionat si in Internet, celalalt browser Explorer, prin intermediul unui plugin. Se intampla in aniii in 1994.  Cu toate acestea, adoptarea Truedoc a fost modesta, iar Microsoft nu a fost interesata in implementarea acesteia in mod nativ. In schimb, compania a optat pentru o metoda complet diferita:

@font-face {

font-family: ‘un font’;

src: url(‘un-font.eot’);

}

p {

font-family: ‘un-font’;

}

Acest l...

Vezi articol

Pro si Contra – CSS

PRO

Dezvoltare rapida: Datorita faptului ca CSS-ul pe care il scriu se afla in aceeasi structura, pot copia si adauga foarte usor secvente de cod de la proiect la proiect. Nu trebuie sa iau nici un fel de decizii asupra structurii CSS-ului meu si nu petrec ore intregi cautand prin el. .

Mai multi dezvoltatori la acelasi proiect: Folosind aceasta structura, am lucrat intr-o echipa de patru dezvoltatori fornt-end din doua tari si fusuri orare diferite fara prea multe probleme si fara a ne calca pe picioare. Odata ce configuratia initiala este stabilita, puteti da rapid sarcini oamenilor – “tu lucrezi pe sectiunea showcase”, “tu lucrezi pe sectiunea de filmografie” – si fiecare dezvoltator trebuie sa lucreze mai cu seama asupra codului CSS specific paginii lui...

Vezi articol

Variatiuni in browsere

Ca in cazul oricarei caracteristici CSS, si degradeurile CSS vin cu partea lor de bug-uri si inconsecvente de implementare. Unele dintre cele mai mai comune pe care le-ati putea intalni sunt:

  • Firefox, din pacate nu accepta degradeuri radiala de dimensiuni explicite.
  • Google Chrome nu suporta deocamdata degradeuri radiale eliptice, desi nu elimina declaratia.
  • Cand folosim tehnica descrisa la figura 6 pentru realizarea de dungi, firefox are nevoie de o ultima intererupere de culoare aditionala pentru a le afisa corect(cu aceeasi culoare ca si cea folosita ultima data).
  • In webkit, triunghiurile folosite pentru a realiza tabla de sah din figura 8.1 sunt finalizate la o marime putin mai mica decat cea necesara, de aceea e bine sa lasati un spatiu de 1px intre ele.
  • Cercurile create folosind degr...
Vezi articol