Share
CSS is een relatief eenvoudige taal om te leren. Beheersing, aan de andere kant, kan een beetje moeilijker blijken te zijn. Alleen al het compenseren van verschillende browser-inconsistenties kan migraine veroorzaken. In dit artikel zullen we vijf van de meest heftige problemen die je tegenkomt bij het bouwen van webtoepassingen demystificeren.
We hebben dit allemaal gedaan. Je denkt bij jezelf: "Wow, deze tekst zou er geweldig uitzien als hij felrood was." (echt ??) Helaas, als je de nodige styling toevoegt, blijft je tekst zwart. Hoe kan dat?
Er kunnen een paar redenen zijn waarom uw stijlen niet van kracht worden. Het is onnodig om te zeggen dat dit een vervelende probleem kan zijn, vooral voor beginnende CSS-ontwikkelaars. Breng eerst een bezoek aan uw CSS-bestand en zorg ervoor dat er geen typfouten zijn. Ik heb vele uren verspild met het ontmantelen van mijn documenten om te ontdekken dat ik een woord verkeerd gespeld heb. Maar als je op een bepaald moment niet je hoofd tegen de muur hebt geslagen, mag je jezelf geen webontwikkelaar noemen! Waarschijnlijk heb je te maken met een specificiteitsprobleem. Probeer toe te voegen "!belangrijk"naast de stijl die niet werkt. Als het plotseling werkt, betekent dit dat je zeker een" gewicht "-probleem hebt. Laat" altijd belangrijk "nergens in je stylesheet staan, gebruik het gewoon als een manier om fouten te debuggen. Overweeg het volgende voorbeeld:
# wrap #myStyle color: black;
Omdat er hier een grotere specificiteit is, blijft de kleur zwart. Door de extra identifier "#wrap" op te nemen, is er meer gewicht in deze selector. Bijgevolg wordt de eerste stijl genegeerd ten gunste van deze.
Hoe kunnen we dit probleem oplossen?? Controleer eerst of de tweede stijl volledig kan worden gewist. Als dat niet het geval is, hoeft u alleen maar meer specificiteit aan uw oorspronkelijke selector toe te voegen. We zullen het concept specificiteit "binnenkort in groter detail bespreken. Laten we proberen toe te voegen:
# wrap p # myStyle color: red;
Nu wordt de tekst uiteindelijk rood. Door de extra "p" -selector toe te voegen, hebben we nog een punt toegevoegd, waardoor alle andere stijlen worden overschreven.
Misschien meer dan wat ook, kan positionering een onnodig verwarrend onderwerp blijken te zijn voor beginnende CSS-ontwerpers. De beste manier om te leren is om eerst de absolute positionering aan te pakken. Laten we aannemen dat we een leeg html- en CSS-document hebben. Als we een afbeelding absoluut op de pagina zouden plaatsen - zeg 100px vanaf de bovenkant en 100px vanaf de linkerkant van de randen van het venster - zouden we de volgende stijl kunnen schrijven ...
img positie: absoluut; top: 100px; links: 100px;
Absoluut gepositioneerde elementen worden gepositioneerd in relatie tot de elementen die zich het dichtst bij elkaar bevinden. In dit geval, waar er geen relatief gepositioneerde elementen op de pagina staan, wordt de afbeelding gepositioneerd in relatie tot het venster.
Stel je nu voor dat we een relatief gepositioneerde diva om ons heen hebben gewikkeld.
Om een positioneringscontext in te stellen, moeten we "position: relative" toevoegen aan de styling van onze parent-div.
div # wrapper positie: relatief; achtergrond: grijs; / * Gewoon om de randen te zien. * / Height: 600px; / * Omdat het beeld absoluut gepositioneerd is, moeten we de hoogte forceren. * / Width: 770px; marge: automatisch;
Wanneer we de afbeelding absoluut positioneren, wordt deze "relatief" geplaatst ten opzichte van de divisie "wrapper". Houd er rekening mee dat als we deze eigenschap verwijderen, de afbeelding opnieuw in relatie wordt gebracht met het browservenster. De eigenschap "positie" is hier de sleutel.
Chris Coyier bespreekt enkele praktische voorbeelden die precies laten zien hoe en wanneer positionering moet worden gebruikt. Bevat een demo en een downloadbare broncode.
Bezoek artikel
"Laten we enig licht werpen op de schimmige mysteries van CSS-positionering.Als uw CSS-vaardigheden beperkt of zelfs gematigd zijn, leert u wat u nodig hebt om positionering onder de knie te krijgen."
Bezoek artikel
Voor degenen die niet bekend zijn met de "Double-Margin Bug", als u een element zweeft en dan procedeert om marges toe te voegen in dezelfde richting als de float, zal Internet Explorer 6 de waarde verkeerd verdubbelen. In feite wordt een linkermarge van "100px" in IE6 "200px". Er zijn drie verschillende remedies die we zullen beoordelen.
Verander de weergave naar inline. De eenvoudigste oplossing, ontdekt door Steve Clason, is om de weergave-eigenschappen van uw element te wijzigen.
#floatElement display: inline; zweven: links; marge links: 100 px;
Gebruik voorwaardelijke opmerkingen. Gelukkig zal het veranderen van het display die vervelende bug repareren. Wat als, om wat voor reden dan ook, u een andere methode nodig heeft? In Internet Explorer kunt u verschillende browserversies targeten door "voorwaardelijke opmerkingen" te gebruiken. Voeg het volgende toe aan de head-tag van uw document:
In de terminologie zegt deze code: "Als een bezoeker van uw pagina Internet Explorer 6 of lager gebruikt, importeer dan een stylesheet met de naam" ie6.css ". Als gevolg hiervan zullen moderne browsers deze verklaring negeren. IE 6 en lager, aan de andere kant zal het bestand worden geïmplementeerd. Nu, in ons ie6.css bestand, moeten we een bepaalde override-stijl toevoegen.
#floatElement float: left; marge links: 50px;
Omdat we weten dat IE 6 de marges op overdadigde elementen zal verdubbelen, zal het ons document repareren als we de waarde van de marge met 50% verlagen. Deze methode is met name geschikt als u veel stijlen hebt die rechtstreeks op IE6 zijn gericht. Het is belangrijk om al uw "hacks" op een centrale locatie te bewaren.
Implementeer de underscore-hack. Er zijn veel manieren om oudere versies van Internet Explorer rechtstreeks vanuit ons primaire stylesheet te targeten. Over het algemeen geef ik er de voorkeur aan om voorwaardelijke opmerkingen te gebruiken. Als ik echter maar één enkele eigenschap moet wijzigen, gebruik ik vaak de underscore-hack. Beschouw dit als volgt:
#floatElement float: left; marge links: 100 px; _marge-links: 50px;
Moderne browsers zullen door deze eigenschappen fietsen. Wanneer ze bij het onderstrepingsteken komen, zullen ze de stijl volledig overslaan. Aan de andere kant zal IE6 het onderstrepingsteken negeren en de nieuwe marges implementeren. Waar we uiteindelijk mee eindigen is dat moderne browsers "100px" toevoegen aan de linkermarge. IE 6, voegt alleen "50px" toe.
Dustin biedt een snelle verklaring voor het overwinnen van deze bug. Bekijk ook zijn gerelateerde zelfstudies.
Bezoek artikel
Zorg ervoor dat u dit gemakkelijk leesbare artikel leest als u nog steeds enigszins in de war bent.
Bezoek artikel
Absoluut! Toch weten maar heel weinig mensen de exacte vergelijking. Velen van jullie gaan waarschijnlijk door de methode "Blijf meer ID's toevoegen totdat het werkt". Praktisch gesproken werkt dit prima. Maar je moet toch weten hoe je het gewicht van je selectors moet berekenen.
Laten we eerst elk type selector aan een waarde koppelen.
Laten we proberen het gewicht van de volgende stijl te berekenen ...
body #wrap div # zijbalk ul li a.geselecteerd willekeurige stijl ...
Verwijzend naar onze rekenmachine hierboven, zullen we deze selector ontleden. Het lichaamselement krijgt één punt. Vervolgens hebben we een identifier (# wrap). Dit telt 100 punten op voor de telling. We gaan door met "div # sidebar". Hoeveel punten denk je dat dit waard is? Als je 100 punten hebt geraden, zou je niet correct zijn. U moet het element "div" in uw gewicht betrekken. Het juiste antwoord is 101 punten. De elementen "ul", "li" en "a" verdienen één punt per stuk. Ten slotte ontvangt de "geselecteerde" klasse nog eens 10 punten. Als we alles optellen, komen we op een som van 215.
Ik raad u aan een paar minuten te besteden en dit puntensysteem te onthouden. Het zal je een hoop verspilde tijd besparen als je merkt dat je in een specifiek dilemma zit!
Voor een gedetailleerde uitleg van de specificiteit, raad ik u aan dit artikel van boven naar beneden te lezen.
Bezoek artikel
Leer de kunst van specificiteit in een leuke "Star Wars" -instelling. Dit moet je lezen.
Bezoek artikel
Een vereiste stap bij het werken aan een site is om deze in elke moderne browser te bekijken: Firefox, Internet Explorer, Safari en Opera. Stap twee is om uw site te testen in een oudere versie van IE. Ik raad u aan IE Tester te downloaden, waarmee u uw site in IE 5 - IE 8 kunt bekijken. De laatste stap is om alle minder gangbare browsers te controleren. Bezoek BrowserShots.org om snapshots van uw site in elke beschikbare browser te bekijken.
Heb je een hekel aan het omschakelen tussen IE en Firefox bij het testen van je site? Waarom download je IE Tab niet??
Bezoek artikel
Eventuele verwarrende vragen die ik heb gemist? Ik weet zeker dat er genoeg zijn. Laat een reactie achter en ik zal proberen ze in deel twee op te nemen. Ik hoop deze stijl- en antwoordartikelen in een doorlopende serie te veranderen.
Accentsconagua
