Vi presenterar översättningen av artikeln "Varför CSS Grid är bättre än Bootstrap för att skapa layouter" av Per Harald Borgen, publicerad på webbplatsen ru.hexlet.io.

CSS Grid är ett nytt sätt att skapa layouter på webben. För första gången finns ett fullfjädrat layoutsystem tillgängligt direkt i webbläsaren, vilket ger en hel del fördelar.

Dessa fördelar blir särskilt slående när du jämför CSS Grid med det mest populära ramverket, Bootstrap. Inte bara kan du skapa layouter som tidigare var omöjliga utan JavaScript, utan din kod kommer att bli lättare att underhålla och förstå.

Låt oss titta på de tre främsta anledningarna till varför jag tycker att CSS Grid är överlägset Bootstrap.

Markeringen blir enklare

Att ersätta Bootstrap med CSS Grid kommer att göra HTML renare. Även om detta inte är den viktigaste fördelen, är det förmodligen den första du kommer att märka.

För tydlighetens skull skapade jag en dummy-webbplatslayout så att jag kunde jämföra koden som krävs för de två versionerna. Här:

Bootstrap

Låt oss först titta på uppmärkningen som behövs för att bygga den här webbplatsen i Bootstrap.

Här skulle jag vilja att du uppmärksammar detta:

1. Varje rad måste ha en separat tagg
   .
2. Klassnamn (col-xs-2) måste användas för att ange layouten.
3. När det här mönstret blir komplicerat, blir det även HTML.

Om det här är en responsiv webbplats ser taggarna vanligtvis ännu värre ut:

CSS Grid

Låt oss nu titta på ett sätt att implementera detsamma i CSS Grid. Här är HTML:en:

Jag kunde ha använt semantiska element, men bestämde mig för att hålla mig till divs för att göra jämförelsen med Bootstrap tydligare.

Du kan genast märka att denna markering är enklare. Fula klassnamn och extra div-taggar för varje rad är ett minne blott. Det är bara en behållare för nätet och positionerna inom det.

Och till skillnad från Bootstrap kommer denna uppmärkning inte att bli alltför komplex när komplexiteten i sidlayouten ökar.

I Bootstrap-exemplet behövdes du inte lägga till någon CSS; i CSS Grid måste du verkligen göra det. Mer specifikt måste du lägga till detta:

För vissa kan detta vara ett försäljningsargument för Bootstrap: du behöver inte oroa dig för CSS för att skapa ett enkelt rutnät – du bygger bara layouten i HTML.

Men som du kommer att se i nästa punkt är förhållandet mellan uppmärkning och layout faktiskt en sårbarhet när det kommer till flexibilitet.

Mycket mer flexibilitet

Låt oss säga att du vill ändra layouten beroende på skärmstorleken. Höj till exempel menyn till den översta raden för visning från mobila enheter.

Med andra ord, ändra layouten från detta:

till detta:

CSS Grid

Att göra detta med CSS Grid är väldigt enkelt. Vi lägger till en mediefråga och blandar olika block som vi vill:

Möjligheten att skapa en layout på detta sätt - utan att oroa dig för hur HTML skrivs - kallas för källordningsoberoende, och det är en enorm vinst för utvecklare och designers.

CSS Grid låter dig förvandla HTML till vad det var tänkt att vara. Inom innehållsmarkering, inte visualitet, vilket är vad CSS är tänkt att göra.

Bootstrap

Om vi ​​ville göra samma sak i Bootstrap, skulle vi behöva ändra HTML. Vi skulle behöva flytta menytaggen till den översta raden, förutom rubriken, eftersom menyn i den andra raden hålls som gisslan.

Att göra detta med en mediefråga är inte en trivial uppgift. Detta kan bara göras med HTML och CSS, och du måste pilla med JavaScript.

Det här exemplet visar den enorma fördelen med CSS Grid som jag har upplevt själv.

Inga fler gränser för 12 kolumner

Det är inte det största problemet, men det har varit irriterande många gånger. Eftersom Bootstrap-rutnätet är uppdelat i 12 kolumner får du problem om du vill ha en layout med fem kolumner. Eller sju. Eller nio. Eller från ett nummer som inte är tolv.

Inte så med CSS Grid. Du kan göra din egen layout med så många kolumner du vill. Här är en layout med sju kolumner.

Detta görs genom att ställa in grid-template-columns till repeat(7, 1fr) så här:

Det kan finnas hacks för att göra detta i Bootstrap... Och jag är medveten om att Bootstrap 4 använder Flexbox, vilket möjliggör denna flexibilitet, men det är fortfarande inte ur beta.

Innan vi avslutar den här artikeln måste vi naturligtvis prata om webbläsarstöd. När detta skrivs stöder 75 % av den globala webbtrafiken CSS Grid.

Men innan du helt slutar använda CSS Grid föreslår jag att du lyssnar på vad Morten Rand-Hendriksen har att säga om det. Han hävdar att CSS Grid är en möjlighet att ompröva hur vi tänker kring bakåtkompatibilitet:

"CSS Grid är en layoutmodul, den låter oss ändra layouten på ett dokument utan att störa källkodens ordning. CSS Grid är med andra ord ett helt visuellt verktyg, och om det används på rätt sätt kommer det inte att påverka de interna relationerna mellan innehållet i dokumentet. Detta leder till ett enkelt men överraskande faktum: bristen på CSS Grid-stöd i en äldre webbläsare bör inte påverka upplevelsen av en webbplatsbesökare, det borde helt enkelt ändra den uppfattningen.”

Med andra ord, när du separerar innehållet från det visuella kommer alla besökare att se innehållet, men CSS Grid kommer att förbättra visningsupplevelsen för dem som har det aktiverat med bättre uppmärkning.

Slutsats

"Ju mer jag använder CSS Grid, desto mer övertygad är jag om att det inte finns någon fördel med att lägga till ett abstraktionslager ovanpå det. CSS Grid är ett layoutramverk inbyggt direkt i webbläsaren."

Hej kära läsare av bloggsidan. Idag skulle jag vilja prata om varför du kan behöva kunskaper om HTML-språket när du arbetar med en webbplats (läs om vad det är), grunderna för att arbeta med CSS cascading style sheets (du hittar en introduktionsartikel om ämnet), samt att förstå åtminstone grunderna och principerna för att bygga program i PHP och logiken i att arbeta med MySQL-databaser.

låter dig skapa webbplatser utan att äga all visdom som nämnts ovan, men samtidigt som du arbetar kommer du förmodligen att ha frågor och problem som du inte kan lösa med ens det mest sofistikerade CMS (Joomla, WordPress, Drupal, etc.).

Varför kan du behöva kunskaper om språk (markering, stilar, serverprogrammering) när du arbetar på en webbplats?

Antingen hittar du inte ett sådant objekt i CMS-administratörspanelen bland många andra inställningar (motorförfattarnas logik när de placerar vissa inställningsobjekt är fortfarande otydlig och kanske spelar författarens vanekraft en viss roll här), eller så kommer utvecklarna inte att inkludera ett sådant objekt i administratörspanelen för innehållshanteringssystemet alls. Det är omöjligt att implementera inställningar för allt via adminpanelen - vanligtvis visas bara de mest nödvändiga och mest använda inställningarna där.

Det händer ofta lättare att lösa problemet inte med standardverktygen som tillhandahålls i motorns adminpanel, utan direkt genom att redigera något i databasen eller genom att justera innehållet i vissa motorfiler genom åtkomst till dem via FTP.

Ja, detta kommer att kräva att man spenderar tid på att lära sig åtminstone grunderna i HTML-markeringsspråket, förstå hur överlappande stilmallar påverkar utseendet på webbsidor, samt att förstå databasens struktur och lära sig hur man gör ändringar i den. Och kanske det svåraste är att förstå de grundläggande principerna för att skriva kod i PHP för att förstå vad och var som kan ändras smärtfritt och vad som inte bör röras.

Jag kommer naturligtvis att börja med designen av webbsidor (faktiskt, för tillfället har jag redan slutfört denna uppgift och du kan se resultatet och). Som jag redan nämnde i ett av de tidigare inläggen bestod tills nyligen alla resurser av sidor i HTML-format. Dessutom specificerades webbplatsens innehåll (texter, bilder, tabeller) och dess design (färger, bakgrund, indrag).

I den moderna förståelsen av korrekt layout bör innehållet utföras med hjälp av hypertextmarkeringsspråktaggar, och utformningen av detta innehåll bör göras med hjälp av externa stilmallsfiler. Denna separation gör att du kan befria webbsidan från onödig servicekod.

Faktum är att sökmotorer är mycket nära titta på förhållandet mellan informationskomponenten webbsideskod (text som visas i webbläsaren) och dess tjänstkomponent (taggar, olika skript, etc.). Därför, genom att flytta bortom gränserna för den här sidan allt som inte innehåller en informationskomponent, utan endast ansvarar för designen av sidorna, förbättrar vi sökmotorernas attityd till vårt projekt (nåja, åtminstone i teorin).

Dessutom låter listan över CSS-regler, placerad i en separat fil, dig förena resursens design. Vid behov kan du alltid ändra något i designen utan att redigera koden för alla webbsidor, eftersom i det här fallet räcker det med att korrigera befintliga eller lägga till nya stilegenskaper i stilmallen som är gemensam för alla sidor.

Med tillkomsten av stilmallar, många hypertextmarkeringsspråktaggar och deras attribut började anses föråldrad och rekommenderas inte för användning. Istället rekommenderas det att använda CSS-egenskaper som utför samma åtgärder. Detta betyder inte att det inte längre finns ett behov av att lära sig HTML, det är bara att antalet taggar och deras attribut som du behöver känna till och kunna använda för att skapa och underhålla en webbplats har minskat. Jag ska försöka berätta om de taggar som jag själv ständigt använder.

Vilken editor är bättre att redigera eller göra ändringar i koden?

Det är inget komplicerat med detta, för i huvudsak är det inte ens ett programmeringsspråk, utan hypertextmarkering, något som liknar syntaxen på det ryska språket. Vad skulle du vilja ge råd omedelbart baserat på din egen erfarenhet? Testa att skriva taggar själv i anteckningsblock, typ Anteckningar++(läs min), och inte i program som Dreamviewer. Varför?

Ja, för i det här fallet kommer du att bli bättre på och komma ihåg att skriva taggar och attribut. Ja, det är bekvämare att layouta i program som Dreamviewer, eftersom... du kan omedelbart se den i webbläsaren och stavningsalternativen för en viss tagg kan väljas från rullgardinsmenyn.

Men faktum är att du i princip kommer att behöva redigera befintlig kod i dina motorfiler och det blir mycket bekvämare om du kommer ihåg att skriva alla taggar och deras attribut utantill (lyckligtvis finns det inte många av dem). Varför öppna en fil i en krånglig Dreamview för att korrigera en tagg, när det för dessa ändamål räcker med ett vanligt anteckningsblock, ja, eller dess avancerade analog som heter Notepad plus plus (länken ges precis ovanför).

Även om detta är min personliga åsikt (IMHO) och det är upp till dig att bestämma vad som är bekvämare. Till exempel är Evgeniy Popov, i vars kurser jag studerade hela denna fråga, tydligen en Dreamviewer-anhängare. I princip är en sak viktig – att du redigerar koden i en editor som klarar av att spara alla gjorda ändringar och som kan, om så önskas, lämna tillbaka allt som det var(bakåt).

I det här fallet, oavsett hur mycket du förstör, kommer allt att kunna fixas. Och naturligtvis är syntaxmarkering av språket som du skriver eller redigerar kod väldigt bekvämt på. Notepad++ är definitivt mitt val! Jag pratade om dess möjligheter i artikeln precis ovan.

Det är förmodligen inte helt korrekt att prata om uppmärkning och dess design en efter en, så jag ska försöka prata om deras kombinerade användning. Det bör förstås att CSS-egenskaper skrivs i en eller flera separata filer, som du ganska enkelt kan hitta i temat som används för din motor.

Medan webbsidestaggar i ett modernt CMS inte skrivs i en eller flera filer, som tidigare, utan genereras (tolkas) från PHP. Och det är HTML-koden som redan genererats på detta sätt som glider in i webbläsaren så att den i sin tur tolkar den till en form av en internetsida som är förståelig för oss. Knepigt, inte sant?

Det är därför redigera taggar i valfritt CMSär inte en så trivial uppgift, även om du är helt bekväm med hypertextmarkeringsspråk. När allt kommer omkring måste du redigera taggar i PHP-filer och därför måste du känna till åtminstone dess grundläggande begrepp och syntax.

Men oroa dig inte, du behöver inte mycket kunskap om PHP för att redigera designen. Taggarna ligger där så att säga på ytan och det är inte svårt att identifiera dem och korrigera dem vid behov.

Vilka verktyg kan du använda?

Problemet uppstår oftast någon annanstans. Hur hittar man filen med PHP-tillägget där det önskade fragmentet av taggar bildas? Här är en fråga om frågor. Ja, självklart, om du har erfarenhet av att arbeta med dessa motorer så tror jag att du kommer att få kläm på det. Men om du är nybörjare och inte vet vilken av de hundratals PHP-filer som är ansvarig för vad?

Ett utmärkt plugin för en lika utmärkt webbläsare kommer att hjälpa dig här, liksom ovan nämnda Notepad++, som inte är okänt för många. Denna bunt med program hjälper dig att flytta berg och spara mycket tid.

I kommande inlägg kommer jag att berätta i detalj hur du använder dessa program för att effektivt lösa problem som uppstår med webbplatsen. Ja, jag glömde nästan bort det oumbärliga programmet som låter dig komma åt via FTP - FileZilla (det finns redan en artikel om detta ämne). Tja, vi ska förstås också prata om det.

Jo, målen är skisserade, uppgifterna är satta, det återstår bara att genomföra dem. För detta, låt mig ta min ledighet.

Lycka till! Vi ses snart på bloggsidans sidor

Du kanske är intresserad

Vackra ryska teckensnitt för webbplatsen och datorn i onlinetjänsten Google Font - var man laddar ner och hur man installerar Adaptiv (responsiv) design - optimerar webbplatsen för visning på mobila enheter
Gif, Png eller Jpg - rastergrafikformat för webben, deras för- och nackdelar när de används på en webbplats

Detta är den andra artikeln i CSS for Beginners Guide, som förklarar förhållandet mellan CSS och dokument. I den kommer du att lära dig hur du lägger till CSS-stilar till dokumentet som du skapade i processen att studera den första artikeln.

Info: Varför behöver du CSS?

CSS används för att definiera stilarna för dina dokument, inklusive design, layout och layoutvariationer för olika enheter och skärmstorlekar. Du kan placera CSS-stilar inuti taggen dokument med en inbyggd stilmall, eller bifoga en separat CSS-fil som kommer att definiera dina stilar externt. För att länka en extern stilmall till ett dokument, lägg helt enkelt till en länk till stilmallen i sidhuvudet dokumentera.

Det finns många fördelar med att ha en extern stilmall. Att hålla stilar åtskilda från HTML-innehåll:

• Hjälper till att undvika dubbelarbete
• Underlättar underhåll
• Låter dig göra ändringar för hela webbplatsen på ett ställe

Med CSS lagrar du stylinginformation i delade filer som delas av alla sidor. Till exempel, när dokument refererar till de stilmallar som anger färgen på h2-rubriker, kan du tillämpa stilen på h2-rubriktaggar globalt genom att ändra ett enda CSS-attribut.

När en användare öppnar en webbsida laddar webbläsaren ner stilinformation tillsammans med sidans innehåll.

När en användare öppnar en webbsida i utskriftsläge kan du tillhandahålla olika stilinformation som gör sidan lättare att läsa.

Hur får man HTML och CSS att fungera tillsammans? I allmänhet används HTML för att beskriva innehållet i ett dokument, inte dess stil. CSS används för att specificera dokumentets stil, men inte innehållet. Du kommer att se några undantag från denna regel längre fram i guiden.

Fler detaljer

Ett märkningsspråk som HTML ger också några sätt att ange stilar.

I HTML kan du till exempel använda taggen för att göra texten fet, eller ange sidans bakgrundsfärg i taggen .

När du använder CSS används vanligtvis inte inställning av stilar med märkningsspråk, eftersom all stilinformation är lätt att läsa och ändra i CSS-filen.

Åtgärd: Skapa en stilmall

1. Skapa en ny textfil i samma katalog som doc1.html skapades i den första artikeln.
2. Spara det som style1.css. Den här filen kommer att vara din stilmall.
3. Kopiera och klistra in följande rad i CSS-filen, spara sedan filen: stark (färg: röd;)

Länka en stilmall till ett dokument

1. För att länka ditt dokument till stilmallen måste du göra några ändringar i HTML-filen. Lägg till raderna nedan:

   C stigande S stil S lakan

2. Spara filen och öppna den i din webbläsare. Stilarket gör de versaler röda:

Förutom rött finns det andra färgnamn i CSS.

• Handledning

Jag skrev misstag och tips utifrån min egen erfarenhet. Om det finns fel som "dåliga råd" tar jag gärna emot konstruktiv kritik. Inlägget är avsett för nybörjare som ska lära sig HTML och CSS, men kanske är specialister också intresserade av att läsa detta material.

1. W3C Validator

Vi rekommenderar att du kontrollerar webbplatsens HTML och CSS via tjänsten validator.w3.org. Den här tjänsten skannar koden och visar fel, till exempel:

• taggen inte stängd;
• inte rekommenderade tecken i länkar;
• En orekommenderad tagg används;
• obligatoriskt attribut inte specificerat;
• och andra.

2. Layout i UTF-8-format

När du lägger ut sidan måste du se till att filkodningen är inställd på UTF-8 (ingen stycklista). Varje textredigerare ställer in kodningen på olika sätt.

En fil i UTF-8-format låter dig använda icke-standardiserade tecken (till exempel symboler för olika språk, valutasymboler och andra).

Du måste också berätta för webbläsare att sidan är öppen i UTF-8-kodning. Detta görs genom taggen nedan:

3. Flera element har samma id

Värdet för id-attributet i HTML-koden ska inte upprepas.

4. Sprites

Det rekommenderas att kombinera flera små bilder till en fil (denna fil kallas sprite). Detta kommer att minska antalet förfrågningar till webbplatsen och förbättra sidladdningshastigheten.

Nuförtiden är det också populärt att använda typsnitt med ikoner istället för sprites. De där. Istället för bokstäver visas kugghjulsikoner, smileys och andra ikoner. Ett exempel är de glyfikoner som används i Twitter Bootstrap.

Fördelarna med teckensnitt för sprites är bevarandet av kvalitet när man ändrar storleken på ikonerna och deras mindre storlek. Men nackdelen är att du inte kan använda mer än en färg i en ikon.

5. Massor av väljare

Det rekommenderas inte att använda mer än tre väljare, eftersom detta påverkar webbplatsens prestanda.

/* rekommenderas inte, stora kapslingar */ .page .item .title a () /* kan förkortas */ .page .item a ()
Webbläsare läser CSS från höger till vänster. De där. i koden ovan kommer först alla länkar som finns på sidan att väljas, och sedan kommer de länkar som finns inuti .item-elementet att väljas.

6. HTML-stilar

HTML är avsett för att visa information (text, bilder). Innehållsdesign (ändra storlek, färg, teckensnitt) förekommer i CSS.

Fel i koden

Fel i koden

7. Felaktiga klassnamn

Många layoutdesigners kopplar klassen .green till den när de behöver göra text grön.

Meddelandetext

Detta är fel, eftersom... När du byter design kan många färger ändras, till exempel kan meddelandetexten visas i blått istället för grönt. Sedan måste du leta efter alla taggar som har klassen .green och ersätta den med .blue.

Meddelandetext

Meddelandetext

8. Pixlar i bråkvärden

Vissa webbläsare låter dig ange pixlar i bråkvärden, till exempel "1,5px". Men detta är fel, för... En pixel är en odelbar enhet. Istället för "1.5px" är det bättre att använda "1.5em".

P ( /* felaktigt */ bokstavsmellanrum: 1,5 px; /* korrekt */ bokstavsavstånd: .005em; )

9. Använda klasser istället för ID

Det rekommenderas att välja efter klass istället för id, eftersom väljare med id har större vikt än klasser, och det kommer att vara svårt att åsidosätta dem.

#modal a ( färg: blå; ) /* färgen nedan kan inte åsidosättas, eftersom #modal har mer vikt än klasserna */ .modal-header a ( färg: #333; ) /* i det här fallet måste du lägga till #modal */ #modal .modal-header a ( färg: #333; )
Det rekommenderas inte heller att använda!viktigt, eftersom dess vikt är högre än den för id-attributet, och det kommer också att vara svårt att åsidosätta.

10. Meny

Menyn bör formateras som en lista.

Hem Nyheter Om företaget

• Hem
• Nyheter
• Om företag

11. Saknar alt för bilder

Alt-attributet måste anges i taggarna (kan vara tomt).

12. Taggar

Det bör bara finnas en titel per tagg per sida

. I grund och botten innehåller denna tagg sidans titel.

13. Transkription

Namnen på alla element måste skrivas i engelsk översättning. Även om du inte vet hur ett ord stavas på engelska finns det många gratistjänster som kan översätta det. När namnen på element visas i transkription ser det oprofessionellt ut.

/* felaktigt */ .tovar () .stranica () .zapros () /* korrekt */ .produkt () .sida () .query ()

14. Clearfix

Det är svårt att skriva om clearfix i ett nötskal, men jag ska påpeka poängen att, enligt min mening, många layoutdesigners gör ett misstag.

Class.clearfix ska anges i den överordnade taggen och inte placeras bredvid den.

15. HTML - programmeringsspråk

Vissa människor som är nya i HTML tror att HTML är ett programmeringsspråk. Faktum är att HTML inte är ett programmeringsspråk, det kan jämföras med Microsoft Word. Till exempel, för att göra text fet, måste du klicka på en knapp i Word, och i HTML måste du skriva koden. De där. HTML är helt enkelt ett verktyg som lägger till text, bilder, tabeller och andra element.

Jag har denna html:

Att skiljas är den mildaste formen av farväl!- Bill Rattleandrollspeer

Och denna css (läggs till i slutet av Site.css):

Fancify (typsnittsstorlek: 1,5em; teckensnittsvikt: 800; teckensnittsfamilj: Consolas, "Segoe UI", Calibri, sans-serif; teckensnittsstil: kursiv;)

Så jag skulle förvänta mig att citatet ("Avskillnad är så söt sorg!") skulle vara kursivt och i ett annat teckensnitt än citatnamnet (Bill Rattleandrollspeer) eftersom dess span-tagg har klassen "fancify" kopplad till den. Klassen är viktig att se eftersom filen den visas i refererar till en layoutfil som använder filen Site.css.

Vilket nybörjarmisstag gör jag nu?

UPPDATERING

Jag trodde att problemet kanske var att jag lade till en ny klass i Site.css efter det här avsnittet i den här filen:

/******************* * Mobile Styles * ********************/ @media only screen and (maxbredd: 850px) (

Men jag flyttade den högre och den fungerar fortfarande inte och kan inte ses genom F12 | Kontrollera elementet för lämplig etikett.

UPPDATERING 2

Så här går HTML:en:

Att skiljas är den mildaste formen av farväl!

Och här är min css-regel i Site.css:

P span-etikett .fancify ( teckensnittsstorlek: 1,5 em; teckensnittsvikt: 800; teckensnittsfamilj: Consolas, "Segoe UI", Calibri, sans-serif; teckensnittsstil: kursiv; display: inline; )

Men det känns inte igen. Jag anser att detta är en exekvering av css/html-protokollet och bör tas upp av någon form av världsorgan. Återigen, jag kanske har gjort något dumt misstag.