Share
CSS är ett relativt enkelt språk att lära sig. Mastering det kan å andra sidan visa sig lite svårare. Att kompensera för olika webbläsarens inkonsekvenser kan ensam producera migrän. I den här artikeln kommer vi att demystifiera fem av de mest domfulla problem som du stöter på när du bygger webbapplikationer.
Vi har gjort allt detta. Du tänker på dig själv, "Wow, den här texten skulle se bra om den var ljusröd." (egentligen ??) Tyvärr, när du lägger till den nödvändiga stylingen, är texten fortfarande svart. Hurså?
Det kan finnas ett par anledningar till varför dina stilar inte träder i kraft. Det kan naturligtvis vara ett otäckt problem - speciellt för att börja CSS-utvecklare. Först besök ett besök på din CSS-fil och se till att det inte finns några typsnitt. Jag har slösat bort många timmar att demontera mina dokument bara för att upptäcka att jag felstavade ett ord. Men om du inte har slagit ditt huvud mot väggen vid en eller annan gång får du inte kalla dig en webbutvecklare! Troligtvis handlar du om ett specificitetsproblem. Försök lägga till "!Viktig"bredvid stilen som inte träder i kraft. Om det plötsligt fungerar, betyder det att du definitivt har ett" viktproblem ". Som en fråga om god praxis, lämna aldrig" viktigt "någonstans i ditt stilark. Använd det som ett sätt att felsöka. Tänk på följande exempel:
#wrap #myStyle färg: svart;
Eftersom det finns större specificitet här kommer färgen att vara svart. Genom att inkludera ytterligare identifierare, "#wrap", finns det mer vikt på den här väljaren. Följaktligen kommer den första stilen att ignoreras till förmån för den här.
Hur kan vi lösa problemet? Du bör först kontrollera om den andra stilen helt kan raderas. Om det inte kan, behöver du helt enkelt lägga till mer specificitet för din ursprungliga väljare. Vi kommer att gå över begreppet specificitet "i mycket större detalj inom kort. Låt oss försöka lägga till:
#wrap p # myStyle färg: röd;
Nu blir texten slutligen röd. Genom att lägga till ytterligare "p" -väljaren har vi lagt till ytterligare en punkt, vilket innebär att man överväger någon annan styling.
Kanske mer än någonting annat kan positionering visa sig vara ett onödigt förvirrande ämne för att börja med mellanliggande CSS-designers. Det bästa sättet att lära sig är att först ta itu med absolut positionering. Låt oss anta att vi har ett tomt HTML- och CSS-dokument. Om vi då skulle placera en bild helt på sidan - säg 100px från toppen och 100px från vänster om fönstets kanter - kunde vi skriva följande stil ...
img position: absolute; topp: 100px; vänster: 100px;
Absolut positionerade element är placerade i förhållande till deras närmast placerade moderelement. I det här fallet, där det inte finns några relativt positionerade element på sidan, placeras bilden i förhållande till fönstret.
Föreställ dig nu att vi lindade en relativt positionerad div runt vår bild.
För att kunna ställa in en positioneringskontext måste vi lägga till "position: relative" till styling av vår moder div.
div # wrapper position: relative; bakgrund: grå; / * Bara för att se gränserna. * / Höjd: 600px; / * Eftersom bilden är helt placerad måste vi tvinga höjden. * / Bredd: 770px; marginal: auto;
Nu, när vi placerar absolut bilden, kommer den att placeras "relativ" till "wrapper" -avdelningen. Tänk på att om vi tog bort den här egenskapen skulle bilden återigen placeras i förhållande till webbläsarfönstret. Egenskapen "position" är nyckeln här.
Chris Coyier går över några praktiska exempel som visar exakt hur och när man ska använda positionering. Innehåller en demo och nedladdningsbar källkod.
Besök artikeln
"Låt oss kasta lite ljus på de skuggiga mysterierna av CSS-positionering. Om dina CSS-färdigheter är begränsade eller till och med måttliga, lär du dig vad du behöver för att behärska positionering."
Besök artikeln
För de som inte känner till "Double-Margin Bug", om du flyter ett element och sedan procederar för att lägga till marginaler i samma riktning som float, kommer Internet Explorer 6 att felaktigt fördubbla värdet. I själva verket blir en vänster marginal på "100px" "200px" i IE6. Det finns tre olika lösningar som vi ska granska.
Ändra visningen till inline. Den enklaste lösningen, som upptäckts av Steve Clason, är att ändra visningsegenskapen för ditt element.
#floatElement display: inline; flyta till vänster; marginal-vänster: 100px;
Använd villkorade kommentarer. Lyckligtvis kommer skärmen att fixa den otäcka buggen. Men, om du av någon anledning behöver en annan metod? Med Internet Explorer kan du rikta in olika webbläsarversioner genom att använda "villkorliga kommentarer". Lägg till följande i huvudetiketten för ditt dokument:
Enligt lekman säger den här koden "Om en besökare på din sida använder Internet Explorer 6 eller lägre, importerar du ett stylesheet som heter" ie6.css ". Därför ignorerar moderna webbläsare detta uttalande. IE 6 och under, Å andra sidan kommer filen att implementeras. Nu, i vår ie6.css-fil, måste vi lägga till lite överstyrning.
#floatElement float: left; marginal-vänster: 50px;
Eftersom vi vet att IE 6 kommer att dubbla marginalerna på flytande element, om vi sänker marginalvärdet med 50%, kommer det att fixa vårt dokument. Den här metoden är särskilt lämplig när du har många stilar som riktar direkt mot IE6. Det är viktigt att innehålla alla dina "hackar" på ett centralt läge.
Implementera Underscore Hack. Det finns många sätt att rikta in äldre versioner av Internet Explorer direkt från vårt primära formatark. Generellt föredrar jag att använda villkorade kommentarer. Men om jag bara behöver byta en enda egenskap, använder jag ofta underskorehacket. Tänk på följande:
#floatElement float: left; marginal-vänster: 100px; _margin-left: 50px;
Moderna webbläsare kommer att cykla genom dessa egenskaper. När de kommer till underskottet, kommer de att hoppa över hela stilen. På flipsidan ignorerar IE6 underskottet och implementerar de nya marginalerna. Vad vi hamnar med är moderna webbläsare som lägger till "100px" till vänster marginal. IE 6, kommer bara att lägga till "50px".
Dustin erbjuder en snabb förklaring för att övervinna denna bugg. Var noga med att kolla in hans relaterade handledning också.
Besök artikeln
Se till att du kolla in denna lättlästa artikel om du fortfarande är något förvirrad.
Besök artikeln
Absolut! Ändå vet väldigt få personer den exakta ekvationen. Många av er förmodligen gå genom "fortsätt att lägga till fler identifierare tills det fungerar" -metoden. Praktiskt taget fungerar det bara bra. Men du borde veta hur man beräknar vikten av dina väljare aldrig-mindre.
Låt oss först associera varje typ av väljare med ett värde.
Låt oss försöka beräkna vikten av följande stil ...
body #wrap div # sidebar ul li a.selected random styling ...
Med hänvisning till vår räknare ovan slår vi bort den här väljaren. Kroppsdelen får en poäng. Därefter har vi en identifierare (#wrap). Detta kommer att lägga 100 poäng till tally. Fortsätt på, vi har "div # sidebar". Hur många poäng tycker du att detta är värt? Om du gissade 100 poäng skulle du vara felaktig. Du måste faktor i "div" -elementet i din vikt. Det rätta svaret är 101 poäng. "Ul", "li" och "a" -elementen tjänar en poäng en bit. Slutligen får den "valda" klassen ytterligare 10 poäng. Lägger till allt, vi kommer till en summa av 215.
Jag rekommenderar att du spenderar några minuter och memorera det här punktsystemet. Det kommer att spara dig mycket bortkastad tid när du befinner dig i ett specificitets dilemma!
För en djup förklaring av specificitet rekommenderar jag starkt att du läser den här artikeln från topp till botten.
Besök artikeln
Lär dig arten av specificitet i en rolig "Star Wars" -inställning. Detta är ett måste läsas.
Besök artikeln
Ett nödvändigt steg när du arbetar på en webbplats är att granska den i alla moderna webbläsare: Firefox, Internet Explorer, Safari och Opera. Steg två är att testa din webbplats i äldre version av IE. Jag rekommenderar att du laddar ner IE Tester, som låter dig se din webbplats i IE 5 - IE 8. Det sista steget är att kolla alla de mindre vanliga webbläsarna. Besök BrowserShots.org för att visa snapshots av din webbplats i varje tillgänglig webbläsare.
Hatar du att behöva byta mellan IE och Firefox när du testar din webbplats? Varför inte ladda ner IE-fliken?
Besök artikeln
Eventuella förvirrande frågor som jag saknade? Jag är säker på att det finns gott om. Lämna en kommentar och jag försöker att införliva dem i del två. Jag hoppas att vända dessa "Fråga och svara" stilartiklar till en pågående serie.
Accentsconagua
