Share
CSS er et relativt enkelt språk å lære. Mastering det, på den andre, kan vise seg litt vanskeligere. Å kompensere for ulike nettlesersammenheng alene kan produsere en migrene. I denne artikkelen vil vi demystifisere fem av de mest utfordrende problemene som du vil møte når du bygger webapplikasjoner.
Vi har gjort alt dette. Du tenker på deg selv, "Wow, denne teksten ville se bra ut hvis den var rød." (egentlig?) Dessverre, når du legger til den nødvendige stylingen, forblir teksten svart. Hvorfor det?
Det kan være noen grunner til at stilene dine ikke trer i kraft. Unødvendig å si, det kan være et styggt problem - spesielt for begynnelsen av CSS-utviklere. Først må du besøke din CSS-fil og sørge for at det ikke er noen skrivefeil. Jeg har kastet bort mange timer demontering av dokumentene mine bare for å finne ut at jeg feilstavte et ord. Men hvis du ikke har slått hodet mot veggen på en eller annen gang, har du ikke lov til å ringe deg selv en webutvikler! Sannsynligvis har du å gjøre med et spesifisitetsproblem. Prøv å legge til "!viktig"ved siden av stilen som ikke trer i kraft. Hvis det plutselig fungerer, betyr det at du definitivt har et" vekt "problem. Som et spørsmål om god praksis, la du aldri være" viktig "hvor som helst i stilarket. Bruk det bare som en måte å feilsøke på. Tenk på følgende eksempel:
#wrap #myStyle color: black;
Fordi det er større spesifisitet her, vil fargen forbli svart. Ved å inkludere tilleggsidentifikatoren, "#wrap", er det mer vekt på denne velgeren. Følgelig vil den første stilen bli ignorert til fordel for denne.
Hvordan kan vi løse dette problemet? Du bør først sjekke for å se om den andre stilen helt kan slettes. Hvis det ikke kan, må du bare legge til mer spesifisitet til den opprinnelige velgeren. Vi vil gå over begrepet spesifisitet "i mye større detalj snart. La oss prøve å legge til:
#wrap p # myStyle farge: rød;
Nå blir teksten endelig rød. Ved å legge til den ekstra "p" -velgeren, har vi lagt til ett poeng, og dermed overstyrer enhver annen styling.
Kanskje mer enn noe annet, kan posisjonering vise seg å være et unødvendig forvirrende tema for begynnelsen til mellomliggende CSS-designere. Den beste måten å lære er å først takle absolutt posisjonering. La oss anta at vi har et tomt HTML- og CSS-dokument. Hvis vi skulle legge et bilde helt på siden - si 100px fra toppen og 100px fra venstre på vinduets kanter - kunne vi skrive følgende stil ...
img posisjon: absolutt; topp: 100px; venstre: 100px;
Absolutt posisjonerte elementer er plassert i forhold til deres nærmeste posisjonerte foreldreelementer. I dette tilfellet, der det ikke er noen relativt plasserte elementer på siden, blir bildet plassert i forhold til vinduet.
Forestill deg nå at vi pakket en relativt posisjonert div rundt bildet vårt.
For å sette en posisjoneringskontekst, må vi legge til "posisjon: relative" til stylingen av vår foreldres div.
div # wrapper posisjon: relative; bakgrunn: grå; / * Bare for å se grensene. * / Høyde: 600px; / * Fordi bildet er helt posisjonert, må vi tvinge høyden. * / Bredde: 770px; margin: auto;
Nå, når vi plasserer bildet helt, vil det bli plassert "relative" til "wrapper" -delen. Husk at hvis vi fjernet denne egenskapen, ville bildet igjen bli plassert i forhold til nettleserens vindu. Egenskapen "posisjon" er nøkkelen her.
Chris Coyier går over noen praktiske eksempler som viser nøyaktig hvordan og når du skal bruke posisjonering. Inkluderer en demo og nedlastbar kildekode.
Besøk artikkelen
«La oss kaste lys på de skyggefulle mysteriene til CSS-posisjonering. Hvis dine CSS-ferdigheter er begrensede eller moderate, lærer du hva du trenger å mestre posisjonering.»
Besøk artikkelen
For de som ikke er kjent med "Double-Margin Bug", hvis du flyter et element og deretter prosederer for å legge til marginer i samme retning som float, vil Internet Explorer 6 forveksle verdien feil. I virkeligheten blir en venstre margin på "100px" "200px" i IE6. Det er tre forskjellige rettsmidler som vi vil se gjennom.
Endre visningen til Inline. Den enkleste løsningen, oppdaget av Steve Clason, er å endre visningsegenskapen til elementet ditt.
#floatElement display: inline; flyte: venstre; margin-venstre: 100px;
Bruk betingede kommentarer. Heldigvis vil endringen av skjermen fikse den ekle feilen. Men, om du av en eller annen grunn trenger en annen metode? Internet Explorer lar deg målrette mot forskjellige nettleserversjoner ved å bruke "betingede kommentarer". Legg til følgende i hovedetiketten til dokumentet ditt:
I lekmanns vilkår sier denne koden: "Hvis en besøkende på siden din bruker Internet Explorer 6 eller lavere, importerer du et stilark som heter" ie6.css ". Som et resultat vil moderne nettlesere ignorere denne setningen. IE 6 og under, på den annen side, vil implementere filen. Nå, i vår ie6.css-fil, må vi legge til noen tilsidesatte styling.
#floatElement float: left; margin-venstre: 50px;
Siden vi vet at IE 6 vil doble marginene på flytede elementer, dersom vi reduserer verdien av margin med 50%, vil det fikse vårt dokument. Denne metoden er spesielt hensiktsmessig når du har mange stiler som målretter mot IE6 direkte. Det er viktig å inneholde alle dine "hacks" på en sentralisert plassering.
Implement The Underscore Hack. Det er mange måter å målrette mot eldre versjoner av Internet Explorer direkte fra vårt primære stilark. Generelt foretrekker jeg å bruke betingede kommentarer. Men hvis jeg bare trenger å endre en enkelt eiendom, bruker jeg ofte understreket hack. Tenk på følgende:
#floatElement float: left; margin-venstre: 100px; _margin-left: 50px;
Moderne nettlesere vil sykle gjennom disse egenskapene. Når de kommer til understreken, vil de hoppe over stilen helt. På baksiden ignorerer IE6 underskuddet og implementerer de nye margenene. Det vi ender opp med, er moderne nettlesere som legger til "100px" til venstre margin. IE 6, henholdsvis, vil bare legge til "50px".
Dustin tilbyr en rask forklaring for å overvinne denne feilen. Pass på å sjekke ut sine relaterte opplæringsprogrammer også.
Besøk artikkelen
Pass på at du sjekker ut denne enkle å lese artikkelen hvis du fortsatt er litt forvirret.
Besøk artikkelen
Absolutt! Likevel kjenner svært få mennesker den nøyaktige ligningen. Mange av dere går sannsynligvis av "fortsett å legge til flere identifikatorer inntil den fungerer" metoden. Praktisk sett vil dette fungere helt fint. Men, du burde vite hvordan du beregner vekten av dine selgere, aldri-mindre.
Først, la oss knytte hver type velger med en verdi.
La oss prøve å beregne vekten av følgende stil ...
body #wrap div # sidebar ul li a.selected random styling ...
Med henvisning til vår kalkulator over, vil vi dissekere denne velgeren. Kroppselementet mottar ett punkt. Deretter har vi en identifikator (#wrap). Dette vil legge til 100 poeng til tally. Fortsatt på, vi har "div # sidebar". Hvor mange poeng tror du dette er verdt? Hvis du gjettet 100 poeng, ville du være feil. Du må faktor i "div" -elementet inn i vekten din. Det riktige svaret er 101 poeng. "Ul", "li" og "a" -elementene tjener ett poeng et stykke. Til slutt mottar den "valgte" klassen ytterligere 10 poeng. Når vi legger til alt, kommer vi til en sum av 215.
Jeg anbefaler at du bruker noen få minutter og husker dette punktsystemet. Det vil spare deg for mye bortkastet tid når du befinner deg i et spesifikk dilemma!
For en grundig forklaring av spesifisitet anbefaler jeg sterkt at du leser denne artikkelen fra topp til bunn.
Besøk artikkelen
Lær arten av spesifisitet i en morsom "Star Wars" -innstilling. Dette er en må lese.
Besøk artikkelen
Et nødvendig trinn når du jobber med et nettsted, er å se gjennom det i hver moderne nettleser: Firefox, Internet Explorer, Safari og Opera. Trinn to er å teste nettstedet ditt i eldre versjon av IE. Jeg anbefaler at du laster ned IE Tester, som lar deg se nettstedet ditt i IE 5 - IE 8. Det siste trinnet er å sjekke alle de mindre vanlige nettleserne. Gå til BrowserShots.org for å se øyeblikksbilder av nettstedet ditt i alle tilgjengelige nettlesere.
Hater du å måtte bytte mellom IE og Firefox når du tester nettstedet ditt? Hvorfor ikke laste ned IE Tab?
Besøk artikkelen
Eventuelle forvirrende spørsmål som jeg savnet? Jeg er sikker på at det er nok. Legg igjen en kommentar, og jeg vil prøve å innlemme dem i del to. Jeg håper å slå disse "Spørsmål og svar" stilartene inn i en pågående serie.
Accentsconagua
