Share
Formatele fluide reprezintă modalitatea perfectă de a găzdui conținutul nostru în orice dimensiune a ferestrei de vizualizare. Textul poate curge pe măsură ce contactele cresc și se micșorează, imaginile și chiar imaginile video, iar iframe-urile se pot flexa și se pot deplasa. Dar dacă avem conținut care nu ar trebui alte dimensiuni? Cum ar fi blocurile de anunțuri, de exemplu, care sunt deseori concepute cu o dimensiune foarte specifică în minte? Destul de ciudat, acesta este locul unde planurile de masă ajung la salvare ...
Mi-a fost amintit de acest lucru recent când am citit proiectul Responsabil de Implementare al lui Tim Kadlec. A venit chiar la momentul potrivit; Am fost în mijlocul unui proiect de client care avea nevoie doar de această abordare (și am fost ocupat cu măcelărirea acesteia).
Multe site-uri Web depind de veniturile din publicitate. Oricât de mult vă poate disprerea să fiți barrați cu imaginile de marketing web, fără să nu aveți acces la o mare parte din conținutul liber pe care l-ați obișnuit. Tuts +, de exemplu, se bazează în parte pe veniturile publicitare pentru a-și menține echipa tot mai mare de scriitori și personal.
Biroul de publicitate interactivă (iab) este responsabil pentru o cantitate imensă de publicitate digitală și lucrează din greu pentru a defini standarde și linii directoare pentru întreaga industrie. Uitați-vă la Regulile publicității pentru Rețeaua de display pentru o referință la dimensiunile blocurilor de anunțuri universale pe care le recomandă:
Patru imagini cu dimensiuni fixe. Și este important să rămână și la aceste dimensiuni; logo-urile, strategiile și disclaimer-urile ar putea deveni nerecunoscute sau ilizibile dacă s-au stricat într-un aspect fluid. De asemenea, companiile care plătesc pentru aceste anunțuri fac acest lucru pe baza dimensiunii și poziției blocurilor. Un anunț de 300 x 250 pixeli poate să nu fie la fel de proeminent sau eficient atunci când este afișat la o dimensiune mai mică, schimbând astfel compania în cauză.
Anunțurile sunt concepute pentru a fi afișate la o dimensiune fixă, astfel încât până când avem o soluție mai bună pentru publicitatea receptivă, este mai bine să respectăm acest lucru.
Să construim rapid o structură fluidă generică care să ne demonstreze problema. A , conținând un si un . Tot ce avem nevoie:
Apoi îl putem modela astfel:
secțiune lățime: 90%; marja: 0 auto; deoparte lățime: 30%; plutește la stânga; articol lățime: 65%; float: dreapta; img max-lățime: 100%;
Cu o anumită culoare adăugată, acesta este efectul pe care îl veți obține:
Cu a noastră img max-lățime: 100% ne-am asigurat că imaginile noastre sunt fluide și nu izbucnesc niciodată în afara containerului părinte. Din nefericire, lichidul de aici este mai îngust decât lățimea imaginii de 300px, ceea ce nu vrem să se întâmple.
Să fixăm lățimea marginii, lăsând articolul să se îndoiască. Ca o combinație de fix și fluid, ne referim la acest tip de structură ca hibrid.
secțiune lățime: 90%; marja: 0 auto; la o parte width: 300px; plutește la stânga; articol lățime: 65%; float: dreapta; img max-lățime: 100%;
Acest lucru funcționează pe ecrane mai largi, dar imediat ce containerul devine prea mic, adică: când 300px este mai mare de 35% din lățimea containerului, articolul este împins sub:
Putem rezolva acest lucru în cazul nostru prin comutarea marcajului; lăsând deoparte în articolul:
Apoi scoateți lățimea și plutitorul din articol, lăsând în cele din urmă o margine dreaptă pentru a acționa ca jgheab:
secțiune lățime: 90%; marja: 0 auto; la o parte width: 300px; plutește la stânga; marginea-dreapta: 5%; articol img max-lățime: 100%;
Aceasta este ceea ce primim:
Ce este perfect! Conținutul articolului este fluid, în timp ce blocul de anunțuri și părinții săi sunt lățime fixă! Puteți chiar să vă deplasați deoparte spre dreapta, schimbând plutitorul float: dreapta și așezarea jgheabului (marginea) pe cealaltă parte.
Problemele apar, totuși, atunci când conținutul articolului începe să aibă mai mult spațiu vertical decât deoparte. Acesta este rezultatul:
Există hack-uri pentru a evita acest lucru; am putea renunța la o masivă fundătură, apoi la o masă la fel de masivă negativ marginea de jos. Apoi, cu un overflow: ascuns ne lăsăm artificial la o parte, ascunzându-ne tot ce se stinge.
Sau am putea folosi poziționarea și fixăm deoparte în partea din dreapta sus a articolului, oferindu-i articolul niște cearșafuri pentru a face loc pentru el.
Nici unul dintre acestea nu este ideal, fiecare prezentând propriile probleme unice.
Ce?! Am auzit că spui ...
Asta e corect. Aranjamentele tabelului (Dumnezeu își odihnesc sufletele) au fost de fapt destul de bune la aranjarea hibrizilor, așa că să luăm o frunză din cartea lor. Folosind CSS putem afișa elementele noastre ca și cum ar fi componente ale unei tabele. Acest lucru este absolut deloc; noi nu folosim tabele reale în marcajul nostru (ar fi rău pentru că nu lucrăm cu date tabulare). Pur și simplu ne vom baza pe mese în scopuri de afișare, fără a schimba sensul semantic din documentul nostru.
Revenind la layout-ul original (unde partea și articolul erau alături) putem modifica CSS pentru a sugera blocuri de construcție asemănătoare tablelor. Secțiunea noastră care conține textul devine tabelul, articolul și în afară devenind celulele din tabel:
secțiunea display: table; lățime: 90%; marja: 0 auto; în afară display: cell-cell; lățime: 300px; articol display: cell-cell; img max-lățime: 100%;
Ceea ce ne dă:
Nu prea bine. Trebuie să modificăm alinierea verticală a celulelor noastre, deoarece imaginea și textul sunt ambele așezate pe aceeași linie de bază.
în afară display: cell-cell; vertical-aliniere: partea de sus; lățime: 300px; articol display: cell-cell; vertical-aliniere: partea de sus;
Acum, ori de câte ori articolul sau deoparte cresc vertical, celălalt crește cu el. Aranjamentul depinde însă de DOM; oricare element de element de tabel apare mai întâi în document, apare și primul (în partea stângă) a layout-ului nostru de tabel.
Și, bineînțeles, putem împacheta toate aceste lucruri și într-o interogare media, astfel încât acest aspect să fie dat doar pe ecrane mai mari. Pe ecrane mai mici, partea deoparte se va așeza cu ușurință în partea de sus a articolului. Uitați-vă la demo pentru a vedea cum se comportă acest lucru.
Utilizarea afișării tablei CSS este acceptată în toate browserele moderne, dar a fost adoptată numai de Internet Explorer cu lansarea IE8.
Pentru browserele anterioare, așadar, ar fi înțelept să includeți condițional o foaie de stil alternativă, care vă oferă o soluție alternativă de aspect:
(sau ai putea ignora IE7 și mai jos ...)
După cum menționează Tim în cartea sa, telefoanele Windows 7 se vor încărca și în stilurile ie.css pe care tocmai le-am setat. Pentru a preveni acest lucru, va trebui să modificați condițiile:
Deci, acolo avem - cine ar fi crezut că tabelele ar putea vreodată să vă ajute în această epocă de design web responsiv ?! Desigur, aceasta nu este soluția perfectă pe care ați fi dorit-o, dar până când CSS Grid Layout și Flexbox câștigă un pic mai multă tracțiune, aceasta este o alternativă excelentă.
Accentsconagua