Problēmu risināšana CSS. Kāpēc CSS ir tik svarīga, kur es varu rakstīt CSS

Šāda pieeja vairāku iemeslu dēļ bija lielgabarīta:

• tabulas HTML dažāds: Tie prasa daudz veidnes kodu;
• marķējums bija semantiski Nepareizi: Tabulas jāizmanto daudzdimensiju datiem;
• izkārtojuma maiņa nepieciešama iezīmēšanas maiņa: ja mēs vēlējāmies pārvietot kreiso sleju pa labi, tie būtu bijis mainīt HTML struktūru;
• tabulas bija pakļautas sintakses kļūdas: līnijām un šūnām pareizībai ir jāiegulda un jāiegulda noteiktā veidā;
• marķējums bija neizlasāms: Tabulas tika ieguldītas citās tabulās, lai iegūtu papildu kolonnas kolonnās.

Tāpēc no tabulu izmantošanas kā rīks lēnām atteicās, un to vietā izmantoja CSS.

Kas ir CSS

CSS (kaskādes stila loksnes) nozīmē kaskādes stila lapas un ir stila iezīmēšanas valoda (kā HTML vai XML). Tādējādi CSS nepārstāv neko pati par sevi, ja tas nav saistīts ar HTML dokumentu.

Css cēla dzīve HTML dokumentā, izvēloties fontus, pielietojot krāsas, nosakot ievilkumus, pozicionēšanas elementus, mijiedarbību un daudz ko citu.

Kā darbojas CSS

CSS. izvēlas HTML elements (piemēram, punkts), jautā īpašums Mainīt (piemēram, krāsu) un piemēro noteiktu vērtība (piemēram, sarkanā krāsā):

P (krāsa: sarkana;)

Vārds "stils" var būt maldinošs. Jūs varētu domāt, CSS tiek izmantots tikai, lai mainītu teksta, fonta izmēra un veida krāsu. Bet CSS var iestatīt HTML dokumenta izkārtojumu, nosakot augstumu, platumu, iekšējos un ārējos laukus, pozīciju, kolonnu utt.

Kur es varu rakstīt CSS?

CSS kā atribūts

Jūs varat rakstīt CSS tieši HTML elementos, izmantojot stila atribūtu:

Tas ir svarīgs teksts.

CSS B.

Jūs varat izmantot tagu

Šis punkts būs sarkans.

CSS atsevišķā failā

Jūs varat rakstīt savus CSS atsevišķā failā ar paplašinājumu. CSS, un pēc tam sasiet to no HTML, izmantojot tagu .

P (krāsa: sarkana;)

Šis punkts būs sarkans.

Šis HTML dokuments, kas "aicina" CSS failu, mūsu gadījumā, fails nosaukts style.css atrodas tajā pašā mapē kā CSS failu.

Tas trešā metodeizmantojot atsevišķu CSS failu vēlams.

Cascade stila galdi (CSS) tiek izmantoti, lai padarītu tīmekļa lapu pievilcīgu apmeklētāju acīs. Turklāt CSS stilu galds ievērojami vienkāršo tīmekļa lapas izstrādes procesu. Arī CSS ļauj jums veikt izmaiņas vienā vietā, nevis rediģēt visu vietu. Tādējādi jums nav nepieciešams apmeklēt katru vietnes mājas lapu un rediģēt tos.

CSS ietaupa jūsu dārgo laiku un enerģiju. Kaskādes stila lapas, kas izriet no nosaukuma, nosaka konkrētu stilu tīmekļa lapām, pamatojoties uz prioritāšu sarakstu, ko parasti sauc par "Cascade". Turklāt tas arī ļauj jums pārvaldīt dažādus elementus jūsu vietnes tīmekļa lapās. Viens CSS stilu tabula var kontrolēt visu tīmekļa vietnes fontu, formatējumu, teksta lielumu, pozicionēšanu, stilu un krāsu. Lai gan kaskādes stila lapas var mainīt prezentāciju un izskatu jūsu mājas lapā, tomēr viņiem nav nekāda sakara ar mājas lapas dizainu.

CSS var palīdzēt tīmekļa meistars daudzos veidos. Pateicoties CSS tīmekļa vietnei būs pievilcīgāks dizains. Tajā pašā laikā, pat meklētājprogrammas dod priekšroku CSS balstītas vietnes, kad runa ir par to piešķiršanu meklēšanas indeksā.

Vietnes prezentācijas atdalīšana no tā satura.

Ar CSS jūs varat iegūt lielisku kontroli pār jūsu vietnes izskatu, jo šī tehnoloģija ļauj jums saistīt dažādus stilus ar jūsu vietnes tekstu. Tā rezultātā, ja jums ir nepieciešams mainīt jebkura tīmekļa lapas elementa izskatu, tad jums būs nepieciešams rediģēt tikai vienu ārējo tabulu CSS stilu tabulā, un tas ietekmēs visu tīmekļa vietni. Šī pieeja ne tikai nodrošina elastīgu pārvaldības procesu, bet arī ietaupa laiku.

Palieliniet vietnes iekraušanas ātrumu.

Tā kā cascading stila lapas ir teksta faili, tie sver maz un izmanto mazāk joslas platumu, kas savukārt palielina ātrumu lejupielādēt jūsu vietni. Saskaņā ar statistiku, vietne, izmantojot ārējos CSS bāzes stila lapas, tiek ielādēta aptuveni septiņas reizes ātrāk nekā līdzīga vietne bez šīs tehnoloģijas. Tā kā teksta dokumenti tiek ielādēti ļoti ātri, tīmekļa lapas tiks parādītas gandrīz dažu sekunžu laikā, un tas pozitīvi ietekmēs vispārējo iespaidu apmeklētājiem, apmeklējot jūsu vietni.

CSS ļauj viegli mainīt jebkuru vienumu pozīciju tīmekļa lapā. Piemēram, izvēlni var ievietot jebkurā vietā: pa kreisi, pa labi, augšā vai apakšā. Tajā pašā laikā šāda elementu pozicionēšanas galvenais mērķis ir tas, ka meklētājprogrammu roboti vispirms skenē jūsu vietnes galveno saturu. Lai to panāktu, ir nepieciešami visi palīgpunkti, piemēram, izvēlne HTML kodā, kas atrodas pēc galvenā satura.

Saderība CSS ar modernām pārlūkprogrammām.

Tā kā pašlaik ir daudz dažādu pārlūkprogrammu, tīmekļa meistars ir grūti pārbaudīt vietnes veiktspēju pilnīgi visās pārlūkprogrammās. Tomēr, ja jūs pieturaties pie standarta CSS bāzes izkārtojumu, tad šī problēma kļūst viegli atrisināta.

Kā redzams no iepriekš minētā, CSS tehnoloģija ir ārpus tā, kas nodrošina instrumentus modernu, pievilcīgu vietņu izveidei, tas arī palīdz atrisināt vairākas problēmas. Tas pats par sevi nosaka CSS augsto nozīmi.

Viens no vecākajiem pakalpojumiem internetā ir forumi. Šīs komunikācijas vietas parādījās starp pirmo un kopš tā laika paliek gandrīz nemainīgā formā. Bet, neskatoties uz to cieto vecumu, viņi kā pirms viņi tiek galā ar savām funkcijām. Šeit cilvēki sazinās, uzdod jautājumus un saņem atbildes.

Sveiki, dārgie emuāra lasītāju tīmekļa vietne. Šodien es gribētu runāt par to, vai jums ir nepieciešams, ja jūs strādājat ar zināšanām par HTML valodu (lasīt par to, kas tas ir), pamati strādā ar CSS kaskādes galdiem (ievada rakstu par tēmu jūs atradīsiet), kā arī Izpratne par vismaz pamatiem un principiem, veidojot programmas PHP un loģikas darbā ar MySQL datu bāzēm.

Ļauj veikt vietnes, nepiederiet Visi, kas minēti virs gudrības, bet tajā pašā laikā, jums, iespējams, būs jautājumi un problēmas, ka jūs nevarat atrisināt līdzekļus pat visvairāk uzticamākais CMS (Joomla, WordPress, Drupal uc).

Kāpēc jums var būt nepieciešams, strādājot ar vietnes zināšanām valodās (iezīmēšana, stili, servera programmēšana)

Vai nu jūs neatradīsiet šādu vienumu CMS ADMINT starp daudziem citiem iestatījumiem (dzinēju autoru loģika, nosakot dažus iestatījumus, paliek nesaprotama, un, iespējams, šeit tiek atskaņots autora ieraduma spēks) autora ieradums), vai izstrādātāji vispār neietver šādu vienumu satura pārvaldības sistēmas administrācijā. Nav iespējams ieviest iestatījumus visiem, izmantojot administratoru - tur, parasti, tikai visvairāk nepieciešamie un bieži izmantotie iestatījumi tiek parādīti.

Bieži notiek ir vieglāk atrisināt problēmu Nav regulāri sniegta administratorā, izmantojot, bet tieši tiesības kaut ko datu bāzē vai pielāgojot saturu dažiem dzinēja failiem, izmantojot piekļuvi FTP.

Jā, jo tas būs nepieciešams pavadīt laiku, lai pētītu vismaz HTML iezīmēšanas valodas pamatu, lai saprastu, kā kaskādes stila tabulas ietekmē tīmekļa izskatu, kā arī nodarbojas ar datu bāzes ierīci, uzziniet, kā mainīt to, kā mainīt to. Un, iespējams, visgrūtākā lieta ir saprast pamatprincipus koda rakstīšanai PHP valodā, lai saprastu, kas un kur ir iespējams mainīt nesāpīgi, un to, ko nevar pieskarties.

Es sākšu, protams, ar dizainu tīmekļa vietnes (patiesībā, brīdī, kad esmu pabeidzis šo lietu, un jūs varat iepazīties ar rezultātiem un). Kā es minēju vienā no iepriekšējām ziņām, līdz nesen visiem resursiem sastāvēja no HTML lapas. Turklāt tika uzdoti tīmekļa vietnes saturs (teksti, attēli, tabulas) un tā dizains (krāsas, fona, ievilkumi).

Mūsdienīgā izpratnē par verteksa pareizību, aizpildīšana jāveic, izmantojot hiperteksta iezīmēšanas valodas tagus, un šīs uzpildes veidošanai jābūt saistīts ar ārējām failu tabulām. Šāda atdalīšana ļauj izkraut vietnes lapu no liekā servisa koda.

Fakts ir tāds, ka meklētājprogrammas ir ļoti nodomāts skatoties informācijas komponenta attiecību Web lapas kodu (teksts, kas parādīts pārlūkā) un tā servisa komponents (tagi, dažādi skripti utt.). Tāpēc, veicot no šīs lapas, viss, kas nesedz informācijas komponentu, bet ir atbildīga tikai par dekorēšanas lapām, mēs uzlabojam meklētājprogrammu attiecību mūsu projektā (labi, vismaz teorētiski).

Turklāt saraksts ar CSS noteikumiem, kas veikti atsevišķā failā ļauj apvienot resursu dizainu. Ja nepieciešams, vienmēr būs iespējams mainīt kaut ko dizainā, nav visu tīmekļa vietņu pareizais kods, jo Šajā gadījumā būs pietiekami, lai noteiktu esošās vai pievienot jaunas stila īpašības stilā visu lapu stilu stilu.

Ar stilu izskatu tabulas daudziem tagiem no hiperteksta iezīmēšanas un to atribūtiem sāka uzskatīt par novecojušu un nav ieteicams lietošanai. Tā vietā, tie ir ieteicams izmantot CSS īpašības, kas veic tādas pašas darbības. Tas nenozīmē, ka HTML tagad nav nepieciešams mācīties, vienkārši samazināja tagu skaitu un to atribūtus, kas ir jāzina un jāspēj izmantot, lai izveidotu un uzturētu pareizu vietnes stāvokli. Es centīšos pastāstīt par tiem tagiem, kurus es pastāvīgi izmantoju.

Kurā redaktors ir labāk rediģēt vai veikt izmaiņas kodā

Šajā gadījumā nav nekas grūti, jo patiesībā tas nav pat programmēšanas valoda, bet hiperteksta marķējums, kaut kas līdzīgs sintaksei krievu valodā. Ko es gribētu nekavējoties konsultēt, balstoties uz savu pieredzi? Mēģiniet rakstīt tagus pats Notepad, ierakstiet Notepad ++. (Lasīt raktuves), nevis programmās, piemēram, Drimviver. Kāpēc?

Jā, jo šajā gadījumā jūs garām savu roku un atceraties rakstīšanas tagus un atribūtus. Jā, DreamVyver tipa programmās tas ir ērtāk būt top. Jūs varat nekavējoties redzēt to pārlūkprogrammā, un rakstīšanas iespējas par šo vai šo tagu var izvēlēties no nolaižamās saraksta.

Bet fakts ir tāds, ka jums būtībā ir jālidojam esošajam kodam jūsu dzinēja failos un būs daudz ērtāk, ja jūs atcerēsieties visu tagu rakstīšanu un viņu atribūtiem pēc sirds (ieguvums no tiem nav tik daudz). Kāpēc, lai labotu vienu tagu, atveriet failu apgrūtinošajā DreamVier, kad šiem mērķiem ir pietiekami daudz parastā piezīmjdatora, labi, vai arī tās uzlabotā kolēģa ne-tipa plus plus (saite ir nedaudz augstāka).

Lai gan tas ir mans personīgais viedoklis (IMHO), un jūs izlemjat, kas ir ērtāk. Piemēram, Evgeny Popovs, protams, es mācījos visu šo lietu, acīmredzot, drūmvyevry. Tas ir svarīgi principā viens - tā, ka jūs valdījāt kodu redaktorā, kas spēj saglabāt visas veiktās izmaiņas un kas var, ja nepieciešams, atgriezties visu, kā tas bija (Atpakaļ).

Šajā gadījumā, neatkarīgi no tā, kā jūs pretrunā, viss būs fiksējams. Un, protams, apgaismojums sintakse valodas, kurā jūs rakstāt vai rediģēt kodu, ir ļoti ērti. Notepad ++ - tas noteikti ir mana izvēle! Vēlāk es teicu par viņa iespējām rakstā.

Iespējams, stāsta par atzīmi un tās dizains savukārt nebūs labi, tāpēc es centīšos runāt par savu dalīšanu. Ir jāsaprot, ka CSS rekvizīti tiek ierakstīti vienā vai vairākos atsevišķos failos, kurus var viegli atrast jūsu dzinējam izmantotā reģistrācijas tēmā.

Kaut arī tīmekļa tagi mūsdienu CMS nav ierakstīti dažos vai vairākos failos, kā tas bija pirms, un tiek ģenerēts (interpretēts) no PHP. Un tas bija kods, kas jau ir radījis šādā veidā, ka pārlūkprogramma tiek izmantota pārlūkprogrammā, lai tas savukārt interpretē to atvērtā tiešsaistes lapā. Heathwood, vai ne?

tāpēc rediģēt tagus jebkurā CMS Tas nav tik triviāls uzdevums, pat ja jūs esat pilnībā atbrīvots ar hiperteksta iezīmēšanas valodu. Galu galā, tagus, kas jums ir jālido PHP failos, un tāpēc jums būs jāzina vismaz tās pamatjēdzieni un sintakse.

Bet neuztraucieties, lai rediģētu lielu zināšanu dizainu PHP no jums nav nepieciešams. Tagi tur meli, kā pateikt, uz virsmas, un nav daudz grūti identificēt un labot, ja nepieciešams.

Kādi instrumenti var izmantot

Problēma rodas, kā likums, no otras puses. Kā atrast šo failu ar PHP paplašinājumu, kurā veidojas nepieciešamie tagu fragmenti? Šeit ir jautājums par jautājumiem. Jā, protams, ja jums ir pieredze darbā ar datu dzinējiem, tad jūs, es domāju, koplieto. Bet, ja esat jauns un nezinu, kurš no simtiem PCP failu par to, kas ir atbildīgs?

Jums palīdzēs jums ar lielisku spraudni vienlīdz lieliskai pārlūkprogrammai, kā arī iepriekš minētajam Notepad ++, un to nevēlas daudziem. Šī programmu ķekars palīdzēs jums pagriezt kalnus un ietaupīs laika masu.

Tuvākajos ziņojumos es detalizēti pastāstīšu, kā izmantot šīs programmas, lai efektīvi risinātu jaunās problēmas ar vietni. Jā, es gandrīz aizmirsu par neaizstājamu programmu, kas ļauj piekļūt FTP - Filezilla (jau ir raksts par šo tēmu). Nu, par mēs, protams, runāsim.

Nu, mērķi ir izklāstīti, uzdevumi tiek piegādāti, tas paliek tikai, lai tos izpildītu. Par SIM, ļaujiet deklarēt.

Veiksmi tev! Uz neskaidrām sanāksmēm bloga lapu tīmekļa vietnē

Jums var būt ieinteresēts

Skaisti krievu fonti vietnei un datoram tiešsaistes Google fontu pakalpojumā - kur lejupielādēt un kā instalēt Adaptīvā (atsaucīga) dizains - vietnes optimizācija, lai to aplūkotu mobilajās ierīcēs
GIF, PNG vai JPG - Rastra grafikas formāti tīmeklī, to plusi un mīnusi, ja to izmanto vietnē

Dažreiz CSS uzvedība var sajaukt. Uzziniet par dažām viltīgām īpašībām, kas var izraisīt visbiežāk sastopamās problēmas un kā šīs problēmas var atrisināt.

CSS ir haoss. CSS pirmo reizi tika īstenots 1995. gadā un sākotnēji bija paredzēts ne stilīgām tīmekļa vietnēm un tīmekļa lietojumprogrammām, bet gan vienkāršu teksta dokumentu tipogrāfijai. Kopš tā laika CSS ir izturējis sarežģītu ceļu. Iespējams, ka pārāk sarežģīts.

Pirmkārt, CSS nebija paredzēts daudzkrāsainu dokumentu izkārtojumam, adaptīvām saskarnēm un daudziem citiem. Tāpēc viņš ir kļuvis par mēli ar daudzām hacks un glitches, sava veida brīnišķīga tvaika mašīna ar daudz paplašinājumiem un rindu.

No otras puses, tas padara CSS diezgan smieklīgi. Un zināmā mērā - mums pieder fakts, ka mums ir darbs. Es esmu pilnīgi pārliecināts, ka absolūti pārrobežu pārlūkprogrammas CSS izstrāde vēl nav iespējama, un tas ir maz ticams tuvākajā nākotnē.

Jebkurā gadījumā es neesmu rakstījis, lai izteiktu savus uzskatus un neapmierinātību, bet, lai runātu par CSS. Šodien mēs izvirzīsim jautājumus par dažām kopīgām problēmām un izmēģināt mūsu risinājumu, lai tos atrisinātu.

Plūsmas tīrīšana (pludiņa tīrīšana) - jautājums vecs kā pasaule

Es domāju, ka tas ir visizplatītākais jautājums, kas izraisa pārsteigumu, mēģinot stilizēt priekšmetus. Viņš ir vecs kā pasaule, tāpēc es esmu 100% pārliecināts, ka ikviens, kurš kādreiz rakstīja stilus CSS nonāca līdzīgā slazdā.

Būtībā, ja elements satur peldošos blokus iekšpusē (peldēt), tas "sabrūk" - ņem minimālo augstumu. Tas notiek tāpēc, ka peldošie elementi tiek izslēgti no kopējās elementu plūsmas, lai bloks, kurā šie elementi ir iesaiņoti, darbojas tā, it kā tas nesatur meitasuzņēmumus.

Ir daudzi ceļi, kas ļauj labot šo uzvedību. Agrāk tai bija jāpievieno tukšs div ar īpašumu skaidrs: abi. Pēc visiem peldošajiem elementiem konteinera beigās. Jūs to varētu būt arī tas div Nomainiet tagu hr. - arī nav labākais risinājums.

Bet Nicolas Gallagher ierosināja jaunu veidu, kā notīrīt plūsmu mātes elementā bez iezīmēšanas piesārņojuma ar papildu tagiem. Pēc turbulīgajām diskusijām un testiem tika identificēta darba versija ar minimālu īpašību kopumu, jaunākā versija ir norādīta šeit:

Clearfix: pēc (saturs: ""; displejs: tabula; skaidrs: abi;)

Patiesībā, es meloju sakot, ka šī versija ir jaunākā, bet tas noteikti ir visvairāk optimizētā iespēja. Ja jums ir nepieciešams atbalsts IE 6/7, tad jums ir nepieciešams šis fakultatīvs kods:

Kas jums tiešām ir nepieciešams, ir noteikt klasi .clearfix. Jūsu projektā, kuru jūs vēlāk varat izrakstīt elementus, kuros vēlaties tīrīt plūsmu. Tas ir vieglākais veids, kā strādāt ar peldošiem elementiem.

Kā tikt galā ar telpu starp inline bloka elementiem?

Mēģināsim iestatīt vienumus vienā rindā, bet neizmantojot īpašumu. peldēt., vienlaikus definējot tos kā taisnu bloku (inline bloku) vienumus. Īpašums displejs: inline-bloks Uz ilgu laiku, tas palika nepietiekami novērtēts un mazliet izmantots, bet mēs beidzot sapratu, kā tas darbojas, un novērtēja stiprās puses. Mūsdienās vairāk un vairāk interfeisa izstrādātāji atbrīvojas no peldošajiem elementiem par labu sasprindzinošiem elementiem, ja tas ir iespējams.

Es uzskatu, ka sieta elementu galvenā priekšrocība ir tā, ka mums nav jārūpējas par plūsmas tīrīšanu un citām neērtībām, kas var izraisīt peldošus elementus. Būtībā, nosakot elementu kā taisnu bloku, mēs to pārvēršam sava veida hibrīda: pusline un daļēji bloku. Šādus elementus var mainīt pēc izmēra, tiem var būt ārējie ievilkumi, bet to sākotnējais platums ir atkarīgs no satura, bet bloka elementi pēc noklusējuma ņemiet visu vecāku platumu. Tas ir, tie ir uzcelti uz viena otras horizontāli, piemēram, simboliem virknē, nevis vertikāli kā bloki.

Šeit jūs teiksiet: "Un ko varētu būt problēmas ar viņiem?". Problēma ir tā, ka tie ir puscaurlaide, un, piemēram, līnijas, tās ir atdalītas viena no otras ar nelielu intervālu, kas vienāds ar tukšā simbola platumu. Standarta fontam 16px, šī attāluma dimensija ir 4px. Vairumā gadījumu šis attālums ir 25% no fonta lieluma. Jebkurā gadījumā tas kaitina, kad jūs mēģināt veidot elementus. Pieņemsim, ka mums ir mātes elements 600px platumā ar trim meitas bloka elementiem 200px platumā. Ja jūs neatbrīvojat no šīm četru pikseļu atstarpēm, mēs iegūstam, ka elementu radītais platums būs lielāks par mātes elementa platumu (200 * 3 + 4 * 2 \u003d 608).

Par laimi, ir vairāki veidi, kā atbrīvoties no šiem nevēlamiem intervāliem, katrs ar savām priekšrocībām un trūkumiem. Lai būtu absolūti godīgi, es teikšu, ka vēl nav ideālu risinājumu. Apskatīsim šos veidus, pa vienam!

Izmantojot atzīmi: mēs noņemam nepilnības

Pievērsiet uzmanību šai atzīmei - es to iepriekš aprakstīju dažās rindās.

Kā jau iepriekš teicu, trīs no šiem blokiem nebūs iederas vienā rindā, jo starp blokiem (mūsu gadījumā - virknes tulkošanas simbols un divas vietas). Pirmais veids nozīmē vienkāršu atstumtību starp elementiem:

Šī metode darbojas, bet ļoti pasliktina koda lasāmību. Varbūt mēs varam pārvērst mūsu tagus, nevis veidot tos vienā rindā, kods kļūs lasāms:

Vēl viena neparasta iespēja:

Jā, šī pieeja darbojas! Bet kopumā es neiesakām to izmantot, jo tas nav intuitīvs. Neskatoties uz to, ka mums izdevās atbrīvoties no nevēlamās telpas starp elementiem, pretī mēs saņēmām diezgan nepatīkamu kodu. Izmēģināsim kaut ko citu.

Marķējums: izdarīt intervālus

Un ko darīt, ja komentējat nepilnības, nevis atbrīvoties no viņiem?

Wow! Tas ir daudz labāk! Kods palika lasāms, un kopumā viss izskatās labi. Pat ja tas izskatās dīvaini no pirmā acu uzmetiena, varbūt šī pieeja būs noderīga jums. Personīgi es izmantoju šo pieeju, kad man ir nepieciešams noņemt telpu starp šauruma bloku elementiem.

Tomēr daži teiks, ka tas nav ideāls veids, jo šim risinājumam ir nepieciešama kontrole no iezīmēšanas, un pozicionēšanas problēmas ir CSS bizness un tikai CSS. Un tie būs pilnīgi pareizi. Tas mūs noved pie CSS datu bāzes risinājumiem.

CSS: manipulācijas telpa starp rakstzīmēm. Īpašums vēstuļu attālums

Īpašums vēstules atstāšana Izmanto, lai iestatītu platumu telpas starp rakstzīmēm. Ideja par mūsu ceļu ir padarīt telpu starp rakstzīmēm, kas ir mazākas par platumu telpā, un bērna elementiem noved to sākotnējā formā:

Vecāki (burtu spiešana: -0.3em;) .Child (burtu atstatums: normāls;)

Šī metode tiek izmantota griddle - tīkla dzinējs, ko izstrādājis Nicolas Gallagher, tāpēc mēs varam apsvērt šo iespēju diezgan uzticamu. Tomēr man nav īsti patīk tas, ko mēs paļaujamies uz kādu burvju numuru. Turklāt dažiem fontiem jums būs jānosaka vērtība zem -0,3em - piemēram, -0.31em vai -0.32em. Jums ir jāpielāgojas katram konkrētajam gadījumam.

CSS: negatīvs ārējais ievilkums

Vēl viens veids, kas ir līdzīgs iepriekšējam, ir negatīva pensionēšanās izmantošana. Šī metode dod neveiksmes IE 6/7, jo tie nav draudzīgi ar negatīvām atkāpšanās. Turklāt jums ir jānovērš negatīvs ievilkums pirmajā bērna elementā, lai tas nepārvietosies pa kreisi, un ka bērna elementi ir pilnībā uzkāpti konteinerā:

Bērns (pa kreisi: -0.25em;) .Child: pirmais veids (pa kreisi: 0;)

Ja jums nav nepieciešams atbalstīt IE 6/7, vai ja jums ir atsevišķs stila fails šiem pārlūkiem - es domāju, ka tas ir diezgan labs un drošs risinājums.

CSS: fonta lielums

Un pēdējais, bet tālu no sliktākajiem ir tas, ka jūs varat mēģināt iestatīt mātes elementa fonta lielumu 0, lai tukšas rakstzīmes kļūtu arī nulles platums, un pēc tam atjaunot bērnu elementu fonta lielumu.

Vecāks (fonta lielums: 0;) .Child (fonta izmērs: 16px;)

Šī metode darbojas labi, bet viņam ir arī tās trūkumi:

• jūs nevarat atjaunot fonta lielumu, izmantojot relatīvo vērtību. em.Tā kā mātes elementa fonta lielums ir 0px
• telpas netiek noņemtas standarta Android pārlūkprogrammās uz želejas pupiņām
• ja maināt kontekstā @ fonta sejafontu nevar izlīdzināt Safari 5
• dažām pārlūkprogrammām nav atļauts nulles augstuma fonts, piemēram, ķīniešu hroms eksponē šādu fontu standarta 12px

Tātad tas noteikti nav labākais risinājums. Kā jau runājāt agrāk, es pārtraucu izmantot metodi ar komentāriem.

Mēs izjaucām absolūto pozicionēšanu

Pozicionēšana ir diezgan sarežģīta lieta. Daudzi jaunpienācēji ir iestrēdzis brīdī, kad tas ir nepieciešams, lai novērstu elementu lapā. Un viņi parasti izmanto slikti, vai otrādi - ļaunprātīga izmantošana - īpašums amats. Šis īpašums nosaka, kā elements tiks pārvietots salīdzinājumā ar kādu pusi ( tops., pa labi, apakšējā daļa un pa kreisi.). Tas aizņem četras vērtības:

• statisks. - noklusējuma vērtība, pārvietojumi nedarbojas
• radinieks. - vizuālais slānis tiek pārvietots, bet ne pats elements
• absolūts. - elements ir pārvietots apkārtējā kontekstā (pirmais ne-statiskais senčs)
• fiksēts - Elementi ir novietoti skatīšanās rajonā, tas nav svarīgi, kāda ir tā pozīcija Dom

Parasti problēma rodas, ja to izmanto pozīcija: Absolute.. Iespējams, jūs jau esat saskārušies līdzīgi: norādiet elementu ar absolūtu pozīciju, jo vēlaties, lai tas tiktu atdalīts attiecībā pret mātes elementa augšējo labo leņķi (piemēram, kā neliela aizvēršanas poga modeļa logā, vai kaut kas līdzīgs)

Elements (pozīcija: absolūts; augšpusē: 0; pa kreisi: 0;)

... un tas tiek parādīts loga augšējā labajā stūrī. Un jūs domājat: "Kas ir attēls?". Patiesībā tā ir iepriekš noteikta pārlūkprogrammas uzvedība. Atslēgvārds šeit - konteksts.

Iepriekš minētais kods faktiski nozīmē: " es vēlos, lai mans elements tiktu ievietots augšējā labajā stūrī, salīdzinot ar tās kontekstu". Tātad, kas ir " konteksts”? Tas ir pirmais, kas nav statisks senčs.. Tas var būt tiešs mātes elements. Vai vecāku mātes elements. Vai vecāku vecāku vecāks ... un tā būs meklēšana uz pirmo elementu, kura pozicionēšana nav norādīta kā statisks..

Tas var būt nedaudz grūti saprast, jo īpaši iesācējiem, bet, ja jūs reiz iemācījāties - jūs varat ļoti elastīgi kontrolēt absolūtu pozicionēšanu.

Šeit ir vienkāršs piemērs, kas parāda, ko mēs tikko runājām. Divi vecāku elementi, katrs bērna elementa iekšpusē, ko ierosina absolūti vērtības tops: 0. un tiesības: 0. Pa kreisi, mātes elements ir novietots salīdzinoši (paredzamā uzvedība). Pareizais vecāks elements ir atstāts statisks (nepareizs).

Kad izmantot augstumu / platumu 100%?

100% augstums

Vispirms izdomājiet to ar mazāk sarežģītu piemēru. Kad izmantot augstums: 100%? Patiesībā daudzi no mums vismaz vienu reizi brīnījās par jautājumu par to, ko ellē? Es gaidīju, ka mana lapa būtu vismaz aizņemt visu ekrāna augstumu! " Man ir taisnība?

Lai atbildētu uz šo jautājumu, jums ir jāsaprot, kas faktiski nozīmē īpašumu. augstums: 100%: Pilns mātes elementa augstums. Tas nenozīmē "visu ekrāna augstumu". Tātad, ja jūs vēlaties, lai jūsu konteiners aizņem visu ekrāna augstumu, augstums: 100% Nepietiekami.

Kāpēc? Tā kā jūsu konteinera mātes elements ( Ķermenis.) Ir noklusējuma augstums auto.Ko tas nozīmē, ka tā lielumu nosaka saturs. Lai jūs varētu mēģināt likt augstums: 100% Un elementam Ķermenis. - tas joprojām nedos vēlamo efektu.

Kāpēc? Jo vecāku elementa atzīme Ķermenis. (html) Ir noklusējuma augstums auto.Ko tas nozīmē, ka tā lielums ir atkarīgs no satura. Un ko tad, ja jūs mēģināt uzdot elementu hTML augstums: 100%? Darbojas!

Kāpēc? Patiesībā, jo saknes elements ( html) - Šis nav jaunākais vecāku bloks lapā - ir arī skatu loga logs. Vienkārši sakot - tas ir pārlūkprogrammas logs. Tātad, ja jūs jautājat augstums: 100% Elements htmlJūs to padarīsiet par augstumu, kas vienāds ar pārlūkprogrammas augstumu. Tas ir tikai tikai.

Mūsu vēstures rezultāts ir atspoguļots šādā kodā:

HTML, ķermenis, .container (augstums: 100%;)

Un ko tad, ja mātes elements ir noteikts min-augstums, bet ne uzdots augstums?

Roger Johansson nesen atklāja problēmu ar augstums: 100% Gadījumā, ja mātes elements nav iecelta augstuma, bet minimālais augstums ir noteikts tam. Es neiededzināšu aprakstā, bet kā rezultātā lēmums ir tāds, ka mātes elementam ir jānosaka 1px augstums, lai bērna elements to varētu izstiept min-augstums.

Vecāks (min-augstums: 300px; Augstums: 1px; / * Mums ir vajadzīgi, lai bērna elements atklāts visam min-augstuma augstumam * /) .Child (augstums: 100%;)

100% platums

Tagad pieņemsim risināt parametru platums: 100%. Nekavējoties atgādiniet jums, ka, piemēram, ar augstumu, iestatījumu platums: 100% - Tas liecina, ka elementam jābūt vienādam platumam kā mātes elements. Šeit nav pārsteigumu.

Un tagad es dalīties mazliet noslēpumā. Platums nav tieši pareizais šī īpašuma nosaukums. Īpašums platums Faktiski nenosaka visu elementa platumu, bet tikai tās satura platums, kas ir pilnīgi atšķirīgs no pilnā elementa platuma.

Ja mēs pievienojam iekšējo lauku un robežas jūsu elementam, uz kuru platums ir izstādīts platums: 100%Šis elements netiks piemērots vecākiem - tas pārsniedz tās robežas. Tas viss ir saistīts ar laukiem un robežām. Un tas ir iemesls, kāpēc īpašums platums To sauc par satura platumu (satura platums). Lūdzu, apsveriet šādu piemēru, lai saprastu, ko es domāju:

Mātes elementa platums ir vienāds ar 25em.. Bērnu elementa platums ir 100%, kas ir 100% (no tās mātes elementa), bet arī 1M lauks (1M pa kreisi, 1M labi. Summā horizontāli tas būs 2em), kā arī robeža 0,5EM (Tikai 1M horizontāli), kas noved pie tā, ka bērna elementa radītais platums papildinās 25EM (100%) + 2em + 1em \u003d 28EM. Hmm ... Houston, šķiet, ir problēma.

Ir četri veidi, kā labot situāciju. Pirmkārt, un, protams, vislabāk - izvairīties no uzstādīšanas platums: 100%, Jo īpaši, ja šajā gadījumā nav lietošanas, kā tas ir šajā gadījumā. Bērnu elements ir bloka elements, kas automātiski paplašina to mātes elementa platumu (bez šīs problēmas, ko mēs redzam iepriekš). Diemžēl, ja mēs nodarbojamies ar celmu bloku elementiem, varat izmantot šādu labojumu.

Nevar izmantot platums: 100%un pats iestatiet konkrētu platumu elementam. Mūsu gadījumā tas ir 20 - (2 + 1) \u003d 22em. Jāsaka, ka šis risinājums ir slikts, jo tas ir nepieciešams, lai manuāli aprēķinātu vēlamo elementa platumu. Maksājot citu ceļu!

Trešā iespēja izmantos calc ()Lai automatizētu aprēķinus: platums: Calc (100% - 3EM). Viss ir tāds pats. Pirmkārt, mums ir jāaprēķina horizontālo lauku un vertikālo robežu summa. Otrkārt, calc () Tas neatbalsta vislabākajā pārlūkprogrammās (tas neatbalsta IE 8, Safari 5, Opera 12 un standarta Android pārlūku).

Ceturtā iespēja - izmantojiet īpašumu box-Izmērs: Border-Box. Būtībā tā maina konteinera modeļa uzvedību, lai platums atspoguļotu kopējo elementa platumu, robežas un lauki ir iekļauti. Labā ziņa ir tā, ka atbalsts pārlūkiem šī īpašuma ir diezgan laba (viss, izņemot IE 7 un Opera 9).

Kā nevar kļūdīties Z index?

Visi posteņi tiek novietoti trīsdimensiju telpā: papildus vertikālai un horizontālai pozicionēšanai elementi atrodas arī gar Z asi. No pirmā acu uzmetiena šī koncepcija šķiet diezgan vienkārša: elementi ar augstāku Z index ir parādās virs elementiem ar zemāku Z index.

Diemžēl lietas var būt sarežģītākas, nekā tās šķiet pirmajā acu uzmetienā. Es parasti esmu pārliecināts, ka tas ir visvairāk mulsinošs CSS īpašums. Es esmu pārliecināts, ka problēmas ar Z index ir visizplatītākās un kaitinošas, ar kurām jūs varat tikties tikai tad, strādājot ar CSS. Bet mēs centīsimies atrast risinājumu.

Sāksim no sākuma: Z-indeksa īpašums nedarbojas ar statiskiem elementiem. Lai pārvietotu elementu gar Z Axis, jums ir jānosaka pozicionēšana vienumam kā radinieks., absolūts. vai fiksēts. Tātad pirmā lieta, kas mums jādara, ir pārliecināties, ka prece ir pareizi novietota pirms domājat par to iecelšanu Z index.

Tagad, jums vajadzētu atcerēties, ka elementi DOM neatrodas tajā pašā slānī. Tas nozīmē, ka Z-indeksu eksponāti ļoti svarīgā vērtība var nebūt pietiekami, lai to parādītu pār citiem elementiem. To sauc par pārklājuma konteksts.

Mainot pozīciju gar Z asi, elementus var veikt pārklāšanos viens otru vēlamajā secībā. Lūk, kā, saskaņā ar CSS, specifikācija parāda elementus vienā grupas kontekstā:

1. elementa, kas veido grupas kontekstu, un robežas un robežas
2. meitas grupas konteksti ar negatīviem līmeņiem (pirmais ir mazākais)
3. in-straumēšana, ne-line, ne-pieejas
4. neapbūvi peldošie elementi
5. in-straumēšana, līnija, neatdevas pēctečiem, ieskaitot tabulas un lielākos mazos blokus
6. meitas grupas kontekstā ar 0 līmeņa un socotisko pēctečiem ar līmeni 0
7. meitas grupas kontekstā ar pozitīviem līmeņiem (no mazāk līdz vairāk)

Kad rezultāts ir briesmīgi

Nu, tā bija visbūtiskākā informācija par Īpašuma Z index. Zināšanas par to var ietaupīt daudz laika un samazināt problēmu skaitu, pārliecinieties. Diemžēl tas nav pietiekami. Tie joprojām bija ziedi!

Fakts ir tāds, ka katram grupas kontekstam ir savs mērogs pa Z asi. Būtībā elements A grupas kontekstā 1 un elements B grupas kontekstā 2 nevar mijiedarboties ar Z indeksiem. Tas nozīmē, ka elements A ir daļa no grupas konteksta, kas ir ļoti apakšā grupas grupu, un nav iespējams to secināt B elementa priekšā, kas ir citā grupas kontekstā, kas ir augstāks Grupas pasūtījums, pat ja jūs to iestatāt ļoti augstu z -index.

Bet pagaidiet - patiesībā tas joprojām ir sliktāks. Elements html Veido sakņu grupas kontekstu. Šajā gadījumā katrs socotizēts (Non-static) bloks ar Z index vērtību ir lielāks par auto. Izveido jaunu grupas kontekstu. Šajā laikā nav nekas jauns. Un šeit viss kļūst diezgan skumji: daži CSS rekvizīti, kas ir pilnīgi nesaistīti ar pozicionēšanu Izveidot jaunus grupas kontekstus. Piemēram, dūmainība.

Jā, jā - īpašums dūmainība Izveido jaunu grupas kontekstu. Piemēro arī īpašumus pārveidot un perspevtu.. Bet tas nav jēgas, vai ne? Tas nozīmē, ka, ja jums ir elements ar pārredzamību, atšķiras no 1, vai ar transformāciju, kas nav neviens - Jums ir potenciāla problēma.

Diemžēl katra Z index problēma ir unikāla, tāpēc nav iespējams piedāvāt jebkuru vispārēju risinājumu visām problēmām ar Z index. Beigās jūs varat atsaukt vairākus secinājumus:

• vienmēr pārbaudiet, vai jūsu preces ir iestatītas uz novietošanu pirms pieteikšanās uz tiem Z-indekss
• nelietojiet z-indeksu ar lielām vērtībām, tas ir absolūti bezjēdzīgs. Vairumā gadījumu tas ir pietiekami z-indekss: 10
• pārliecinieties, vai vienumi, kurus vēlaties mainīt displeja pasūtījumu, pieder vienam grupas kontekstam
• ja jūs joprojām neesat atrisinājis problēmu, pārliecinieties, ka ceļā nav pārveidotu vai caurspīdīgu elementu

Kas ir ievilkumu savienība?

Es domāju, ka tas ir viens no "glitches" CSS, kas aizņēma lielāko daļu sava laika. Es uzskatu, ka jūs teiksiet, ka tas ir tik dīvaini kā Z index uzvedība. Īsāk sakot, ievilkumu savienība ir tad, kad divu elementu augšējais un apakšējais ievilkums apvienojas vislielākajā no šiem diviem ievilkumiem. Vispārīgi runājot, vertikālā atkāpe starp abiem blokiem tiek aprēķināts šādi:

Acīmredzot tas ir tieši iemesls, kāpēc viss darbojas tieši kā (kā noteikts un aprakstīts CSS specifikācijā). Esiet tāds, kā tas var, dažreiz mēs nevēlamies vertikāliem ievilkumiem apvienoties. Lai saprastu, kā to atrisināt, vispirms apsveriet šādas problēmas iemeslu. Instatu savienība notiek trīs dažādos gadījumos:

Saistītie bloki

Ja diviem blakus esošiem blokiem ir vertikāli ievilkumi, tie ir apvienoti vislielākā ievilkumā no viena elementa apakšējā depozīta un otrā augšējā atkāpšanās. To var novērst vairāki ceļi:

• skaidrs: pa kreisi; Peldēt: pa kreisi; Blakus esošiem blokiem (labi darbojas arī)
• displejs: inline-bloks Par brāļiem un māsām (arī trigeri inline-tabulu)

Vecāku elements un pirmais / pēdējais meitas elements

Parasti pirmās bērna elementa vecākajam ievilkumam un augšējam ievilkumam ir apvienots vislielākā ievilkumā. Tāpat vecāku zemākā ievilkums un pēdējā bērna elementa apakšējais ievilkums ir apvienots vislielākā. Šī parādība ir pazīstama arī kā "senču savienība". Šādas uzvedības apkarošanai ir vairāki risinājumi. Lielākā daļa no tiem sastāv, pievienojot vienu no šādām īpašībām mātes elementam:

• pārplūdes: slēpta. (vai citi, izņemot auto)
• polsterējums: 1px (vai jebkura cita vērtība, vairāk nekā 0); Daži pārlūkprogrammas pat atbalsta submixel vērtības)
• robeža: 1px ciets caurspīdīgs (vai jebkura robeža)
• displejs: inline-bloks (Lowning tabulas arī strādā - inline-tabula)
• peldēt: pa kreisi. (Arī labi iekļaujas)

Turpmāk minētie pierāda, ka šie labojumi darbībā:

Tukši bloki

Kad tukšajam blokam nav nekādu robežu vai lauku, ne augstumu - tā augšējā un apakšējā robeža ir apvienota vienā. Šādā gadījumā tas ir piemērots pirmajam vai otrajam gadījumam, kas iepriekš aprakstīts - robežu kombinācija ar vecāku / blakus esošo elementu. Tomēr tukši elementi ir arī vispārēja ideja, tāpēc es ceru, ka jums nebūs jārisina ar viņiem bieži.

Rezultāti

Wow, diezgan daudz lietu, vai ne? Bet, diemžēl, tas ir tikai augšdaļa aisberga bugs, hacks un glitches. Es aprakstīju tikai visbiežāk tikšanās problēmas, ar kurām jūs varat saskarties, strādājot ar CSS, bet joprojām ir daudz līdzīgu lietu kā nesaderības pārlūkprogrammām, putru ražotājiem, selektoru specifiku, kaskādēm un mantojumu, un daudz ko citu.

Jebkurā gadījumā es ceru, ka daži risinājumi ļaus jums ietaupīt laiku.

Mēs piedāvājam raksta tulkojumu "Kāpēc CSS režģis ir labāks par bootstrap, lai izveidotu izkārtojumus" no Harald Borgen, kas publicēts tīmekļa vietnē ru.hexlet.io.

CSS Grid ir jauns veids, kā izveidot izkārtojumus internetā. Pirmo reizi pārlūkprogrammā ir pieejama pilnvērtīga slāņu sistēma, kas dod daudz priekšrocību.

Šīs priekšrocības kļūst īpaši izteikušas, ja salīdzināt CSS režģi ar populārāko bootstrap sistēmu. Jūs varat ne tikai izveidot izkārtojumus, kas iepriekš nebija iespējams bez JavaScript, bet jūsu kods kļūs vieglāk uzturēt un saprast.

Apskatīsim trīs galvenos iemeslus, kāpēc es domāju, ka CSS režģis ir pārāks par bootstrap.

Marķēšana būs vieglāka

Bootstrap nomaiņa CSS tīklā padarīs HTML tīrāku. Lai gan tas nav vissvarīgākā priekšrocība, tas ir iespējams, ka pirmais jūs pamanīsiet.

Lai iegūtu skaidrību, es izveidoju fiktīvu tīmekļa vietnes izkārtojumu, lai jūs varētu salīdzināt divām versijām nepieciešamo kodu. Šeit:

Bootstrap

Vispirms apsveriet atzīmi, kas nepieciešama, lai izveidotu šo vietni bootstrap.

Šeit es vēlos, lai jūs pievērstu uzmanību tam, ko:

1. Katrai līnijai jābūt ar atsevišķu tagu
   .
2. Lai apzīmētu izkārtojumu, jāizmanto klases nosaukumi (COL-XS-2).
3. Kad šī veidne ir sarežģīta, arī HTML.

Ja tas ir adaptīva vietne, tagi izskatās kā noteikums vēl sliktāk:

CSS režģis.

Tagad aplūkosim ceļu, lai īstenotu to pašu CSS tīklā. Šeit ir HTML:

Es varētu izmantot semantiskos elementus, bet nolēma ievērot DIV tā, ka salīdzinājums ar bootstrap izskatās skaidrāk.

Jūs varat redzēt tūlīt, ka šis iezīmējums ir vieglāk. Ugly klases nosaukumi un papildu div tagi katrai līnijai - agrāk. Tas ir tikai dators režģim un pozīcijai iekšpusē.

Un atšķirībā no bootstrap, šī atzīme nebūs pārāk sarežģīta ar pieaugošo sarežģītību lapas izkārtojumu.

Piemēram ar bootstrap, jums nav nepieciešams pievienot CSS, CSS tīklā, protams, ir nepieciešams. Ja tas ir īpaši nepieciešams pievienot to:

Dažiem, tas var būt arguments par labu bootstrap: Jums nav jāuztraucas par CSS, lai izveidotu vienkāršu režģi - jūs vienkārši veidojat izkārtojumu HTML.

Bet, kā jūs sapratīsiet no nākamā vienuma, savienojums starp iezīmēšanu un izkārtojumu faktiski ir neaizsargātība, ja mēs runājam par elastību.

Daudz lielāka elastība

Pieņemsim, ka vēlaties mainīt izkārtojumu atkarībā no ekrāna izmēra. Piemēram, paceliet izvēlni augšējā rindā, lai apskatītu no mobilajām ierīcēm.

Citiem vārdiem sakot - mainīt izkārtojumu ar šo:

par šo:

CSS režģis.

Dariet to ar CSS režģi ir ļoti vienkāršs. Mēs pievienojam mediju pieprasījumu un sajauc dažādus blokus, kā mēs vēlamies:

Spēja izveidot izkārtojumu šādā veidā - neuztraucoties par to, kā HTML raksta, tiek saukts par neatkarību no pasūtījuma koda (avota pasūtījuma neatkarības), un tas ir milzu uzvara izstrādātājiem un dizaineriem.

CSS Grid ļauj pārvērst HTML, kas būtu bijis. Satura izkārtojumā, nevis vizualitāte, kas paredzēta CSS.

Bootstrap

Ja mēs vēlējāmies darīt to pašu bootstrap, mums būtu jāmaina HTML. Mums būtu nepieciešams pacelt izvēlnes tagu augšējā rindā, papildus galvenei, jo izvēlne atrodas otrajā rindu ķīlniekā.

Padariet to ar klātbūtni mediju pieprasījuma nav triviāls uzdevums. To var pārbaudīt tikai ar HTML un CSS, un jums būtu sajaukt ar JavaScript.

Šis piemērs parāda milzīgo CSS režģa priekšrocību, ko es pieredzēju.

Ne vairāk ierobežojumu 12 skaļruņi

Tā nav lielākā problēma, bet viņa izņēma daudzas no sevis. Tā kā bootstrap režģis ir sadalīts 12 kolonnās, jums būs problēmas, ja vēlaties izkārtojumu piecu. Vai septiņi. Vai deviņi. Vai no numura, kas nav divpadsmit.

Ar CSS režģi viss ir nepareizi. Jūs varat izveidot savu izkārtojumu no tik daudzām kolonnām, cik daudz vēlaties. Šeit ir septiņu kolonnu izkārtojums.

Tas tiek darīts, iestatot atkārtotu (7, 1FR) vērtību režģa veidnes kolonnām, piemēram:

Iespējams, ka ir hack veids, kā padarīt līdzīgu bootstrap ... un es zinu, ka bootstrap 4 izmanto Flexbox, kas ļauj šo elastību, bet tas joprojām nenāk ārā no beta.

Pirms šī raksta pabeigšanas, protams, jums ir jārunā par pārlūkprogrammu atbalstu. Laikā, kad rakstāt šo rakstu, 75% no pasaules interneta satiksmes atbalsta CSS režģi.

Bet pirms jūs pilnībā noraida domu par CSS režģa izmantošanu, es ieteiktu jums uzklausīt to, ko par to saka Morten Rand-Hendrixen. Viņš apgalvo, ka CSS režģis ir spēja pārdomāt, kā mēs iepazīstinām ar savietojamību:

"CSS Grid ir iezīmēšanas modulis, tas ļauj mums mainīt dokumenta marķējumu, neiejaucoties avota koda secībā. Citiem vārdiem sakot, CSS Grid ir absolūti vizuāls rīks, un, ja tas tiek pareizi izmantots, tas neietekmēs dokumenta satura iekšējos savienojumus. No tā ir jābūt vienkāršam, bet pārsteidzošs fakts: CSS tīkla atbalsta trūkums vecajā pārlūkprogrammā nevajadzētu ietekmēt vietnes apmeklētāja uztveri, tam vajadzētu vienkārši mainīt šo uztveri. "

Citiem vārdiem sakot, tiklīdz jūs atdalīsiet saturu no vizualitātes, visi apmeklētāji redzēs saturu, bet CSS režģis skatīsies vislabāk tiem, kam ir atbalsts ar labākiem marķējumiem.

Secinājums

"Jo vairāk es izmantoju CSS režģi, jo vairāk pārliecināts, ka nav priekšrocības, pievienojot abstrakcijas slāni pār to. CSS Grid ir marķēšanas sistēma, kas ir tieši pārlūks. "