Laboratorul 4
(Deadline: -)
Daca nu sunteti logati exercitiile nu se mai afiseaza.
Asezarea in pagina, layouturi
Proprietatile float si clear
Proprietatea float are efect pentru elemente de tip bloc, inclusiv imagini (pentru elemente inline nu functoneaza, cum ar fi elemente span, q, i, b etc.) pozitionate static sau relativ si are rolul de a face elementul sa se alinieze la stanga sau la dreapta. Restul continutului se va mula pe langa elementul asupra caruia s-a aplicat float.exemplu float
Tipuri de layouturi
- coloane inegale
- coloane egale
http://www.vanseodesign.com/css/equal-height-columns/
http://css-tricks.com/7692-fluid-width-equal-height-columns/ http://matthewjamestaylor.com/blog/equal-height-columns-5-column.htm - design fix - fiecare div e pozitionat absolut, are dimensiune si coordonate fixate in prealabil. Dimensiunile div-urilor nu se modifica la resize.
exemplu design fix
exemplu design fix cu border - design elastic - div-urile au dimensiuni date prin procentaje, se pozitioneaza cu float
exemplu design elastic (ce observati la primul div?) - meniu orizontal
- meniu vertical fix
- etc.
exemplu clearfix
Responsive web design
Un design responsive presupune un layout care poate sa se adapteze usor la orice dimensiune de ecran. Este opus ideii de design fix (dimensiuni exacte).
De ce avem nevoie de un design responsive?
- Putem folosi site-ul mai des, si mai usor. Daca se afiseaza corect pe un telefon mobil il putem accesa chiar si mergand pe strada. Nu suntem fortati sa ajungem la un calculator
- castigam mai multi utilizatori. Daca cineva nimereste pe site-ul nostru folosind un dispozitiv mobil sau o tableta de dimensiuni mai mii, va avea o impresie mai buna si va fi tentat sa se intoarca daca site-ul se afiseaza corect si e usor de folosit (nu avem scroll orizontal, text prea mic sau prea mare.
Media queries
Un media query este un @-rule care permite definirea unui cod css care se va aplica doar in anumite conditii specificate de query. Regulile CSS de aplicat se vor scrie intre parantezele media query-ului. In media query se specifica doar ce ar fi diferit fata de stilul de baza (cel fara media). De exemplu daca vrem sa definim un stil pentru printrare, scriem:
@media print{
body{
background-color:white;
}
}
In cadrul media query-urilor putem avea si operatori logici (si, sau, not). De asemenea putem folosi paranteze atunci cand avem de combinat mai multi operatori
Operatorul and
Operatorul and cere ca ambele conditii pe care le leaga sa fie indeplinite. De exemplu:
@media screen and (min-width:250px) and (max-width:700px){
body{
background-color:blue;
}
}
Codul de mai sus aplica regula background-color:blue; lui body pentru pagina afisata pe ecran in ferestre cu viewport-ul de latime minima 250px, si latime maxima de 700px.
Operatorul ,
Operatorul "," are rol de "sau". De exemplu:
@media (max-width:300px), (min-width:500px){
body{
background-color:blue;
}
}
In exemplu de mai sus, cand viewport-ul are latimea mai mica de 300px sau mai mare de 700px background-ul elementului body e albastru
Operatorul not
Operatorul not va nega conditia data. Cu alte cuvinte se vor aplica regulile din media query atunci cand conditia negata este falsa.
@media not all and (min-width:350px) and (max-width:550px){
body{
background-color:blue;
}
}
Atentie, ordinea aplicarii operatorilor este: and, not, ",". Deci not se aplica intregii expresii de mai sus. Adica background-ul albastru va fi pentru viewporturi care nu au latimea intre 350px si 550px. Cu alte cuvinte se va aplica celor cu latimea sub 350px sau peste 550px.
Query-ul de mai sus se poate scrie exchivalent:
@media not all and (min-width:350px), not all and (max-width:550px){
body{
background-color:blue;
}
}
Operatorul only
Operatorul only e redundant, in sensul ca a scrie, de exemplu, "@media screen" e echivalent cu a scrie "@media only screen". Operatorul only e folosit mai mult pentru browsere mai vechi care nu-l recunosc si astfel css-ul din media query e ignorat.
Atentie! Un media query nu creste prioritatea selectorilor, el doar specifica in ce caz sa fie vizibile proprietatile CSS. Astfel, un selector de acelasi tip definit si in CSS-ul general si in CSS-ul din media query va avea aceeasi prioritate, si daca selectorul se refera la elemente comune, se va aplica efectul de cascada.
De exemplu: (fisier:exemplu_media_query_prioritate_a.html)
@media screen and (min-width:450px){
body{
color:red;
}
}
body{
color:blue;
}
In cazul de mai sus, indiferent de latimea ferestrei, textul va fi de culoare albastra.
Daca insa avem: (fisier:exemplu_media_query_prioritate_b.html)
body{
color:blue;
}
@media screen and (min-width:450px){
body{
color:red;
}
}
Regula CSS din media query va fi vizibila doar cand fereastra depaseste 450px in latime. Prin urmare, pentru ferestre cu latimi mai mici de 450px, culoarea textului va fi albastra, si pentru latimi mai mari de 450px, va fi rosie
Vom da cateva exemple de elemente ce pot fi testate cu un media query:
- aspect-ratio - raportul width/height. In exemplu
(fisier:exemplu_media_query_aspect_ratio.html) aveti si un script care afiseaza pe ecran width-ul si height-ul viewport-ului. Daca redimensionati fereastra pana cand width-ul si height-ul devin egale, o sa devina vizibil un div verde cu textul patrat".
@media screen and (aspect-ratio:1/1) { div#container-patrat { display:table; background:green; } } - se vor adauga
Atributul media
Daca dorim sa folosim stil inline, putem specifica media query-ul in atributul media.