Share
Als het gaat om CSS, zijn er veel bronnen en vermeende 'experttips' op internet. Dit zijn van onbewezen, zelfverklaarde "goeroes" die geen street cred in de designwereld hebben. Hoewel ze wel geldige punten hebben, hoe kan iemand dan weten of een CSS-tip een geldige bron of een niet-geteste hack is??
In plaats van te vertrouwen op onbekende bronnen voor advies, gaan we dieper in op ontwerpers met een uitstekende ontwerpachtergrond en hebben ze de wandeling gelopen. Deze CSS-tips zijn verzameld door enkele van de meest gerespecteerde ontwerpers op deze planeet. Ze hebben de portfolio's om hun advies te ondersteunen, zodat u weet dat elk stukje advies van de hoogste kwaliteit is.
Hieronder staan 10 uitstekende principes die elke webontwikkelaar of ontwerper nuttig, betekenisvol of uitdagend kan vinden. Overweeg dit wijze advies van gezellen (en vrouwen) die de lange, harde weg van designuitmuntendheid hebben bewandeld. Dit zijn de waar meesters van CSS. Drink diep uit hun kennis en neem hun wijsheid op bij je volgende ontwerpavontuur.
Wat me het meest stoort aan de mindset van CSS-hackers is dat ze actief op zoek zijn naar gecompliceerde oplossingen. Zoek en je zult worden gevonden, als je complexiteit wilt, zal het je bij de keel nemen. Het zal je nooit laten gaan, en het zal je ook niet helpen.
Peter-Paul Koch is een peetvader van webontwikkeling. Hoewel hij een oud-schoolontwikkelaar is en het grootste deel van zijn webportfolio tussen 1998-2002 was, werkte hij met mensen als Apple en andere zwaargewichten. Hij heeft een boek over javascript geschreven, maar denk geen seconde dat hij niets te zeggen heeft over CSS.
Koch heeft iets aangepakt elk ontwerper en webontwikkelaar moeten met enthousiasme volgen: houd uw CSS eenvoudig. Eenvoud is moeilijk om te bereiken, vooral in CSS-ontwerp. Er zijn een groot aantal CSS-hacks die je kunt vinden om alle browsers er hetzelfde uit te laten zien, ongeacht de versie of het type. Toch is er een fundamentele fout bij het gebruik van veel CSS-hacks. Naarmate webbrowsers evolueren, is het veel moeilijker om de wijzigingen bij te houden.
Koch heeft een interessant punt over ontwikkelen voor het web. Het internet als geheel is een zeer onvoorspelbare plek en het is een hele slechte strategie om te proberen te raden hoe het in de toekomst zal werken..
Het web is een onzekere plaats. U weet nooit zeker of uw websites precies zo werken als u wilt dat ze werken, ook niet als u alle moderne inzichten uit CSS, toegankelijkheid en bruikbaarheid toepast. In plaats van op zoek te gaan naar valse troost in hacks die vanwege hun complexiteit des te comfortabeler lijken, moet je onzekerheid als een basisprincipe accepteren.
Browsers hebben geen perfecte CSS-ondersteuning; vooral voor mensen die net CSS zijn gaan leren, dat kan razend zijn. Desalniettemin zijn CSS-hacks niet de oplossing. Acceptatie van de manier waarop het web momenteel werkt, is de beste manier om te gaan, omdat het uw sites eenvoudig houdt.
Peter-Paul heeft op iets gereageerd dat niet alleen klopt voor CSS, maar ook voor webontwikkeling als geheel. Eenvoud is de sleutel voor efficiëntie in codering.
Jonathan Snook is een ongelooflijk populaire ontwerper uit Ottawa, Canada, die zijn naam heeft verdiend in webstandaarden en design. Hij heeft gesproken op prestigieuze conferenties zoals SXSW en heeft via Sitepoint een flink aantal technische bronnen over ontwerp gepubliceerd.
Een van Jonathan's huurders bij het coderen van CSS is om de aangiften op één lijn te houden.
De tweede ziet er misschien mooier uit, maar het helpt me zeker niets te vinden. Bij het zoeken naar iets in een stylesheet, is het belangrijkste de regelset (dat is het gedeelte vóór en). Ik ben op zoek naar een element, een ID of een klas. Als alles op één regel staat, wordt het document veel sneller gescand omdat u gewoon meer op een pagina ziet. Zodra ik de regelset heb gevonden waar ik naar op zoek was, vind ik datgene dat ik wil, meestal eenvoudig genoeg is omdat er zelden zoveel.
Jonathan geeft vervolgens een voorbeeld voor enkelvoudige declaraties die er als volgt uitziet:
Goed
Font-size: 18px; rand: 1px effen blauw; color: # 000; background-color: # fff;
Slecht
h2
font-size: 18px;
rand: 1px effen blauw;
color: # 000;
background-color: # fff;
Niet alleen helpt deze aanpak bij het snel scannen van uw CSS, het helpt ook bij het verkleinen van uw CSS-bestand door onnodige spaties en tekens te verwijderen.
De meeste mensen weten het en gebruiken een beetje steno, maar velen maken niet volledig gebruik van deze ruimtebesparende eigenschappen.
Roger Johansson weet een ding of twee over ontwerpen voor het web. De Zweedse webontwerper werkt sinds 1994 op internet en heeft een populaire webontwerpblog. Als het gaat om eenvoudige en elegante oplossingen, is Roger een van de meest ervaren in zijn vakgebied.
Johansson heeft een zeer diepgaand artikel over het belang van CSS-steno, en geeft een aantal voorbeelden van hoe je het kunt gebruiken tijdens het coderen van CSS. Hier is een voorbeeld:
Het gebruik van steno voor deze eigenschappen kan veel ruimte besparen. Als u bijvoorbeeld verschillende marges voor alle zijden van een vak wilt opgeven, kunt u dit gebruiken:
margin-top: 1em;
margin-right: 0;
margin-bottom: 2em;
margin-left: 0.5em;
Maar dit is veel efficiënter:
marge: 1em 0 2em 0,5em;Dezelfde syntaxis wordt gebruikt voor de opvullingseigenschap.
Hoewel CSS-afkorting de grootte van het stylesheet verkleint, helpt het ook om de code eenvoudig te organiseren en te houden. Mooie CSS is eenvoudige CSS.
Mr. Snook heeft nog een ander cruciaal advies dat elke webontwikkelaar moet naleven: blokelementen toestaan om de ruimte organisch te vullen. Als er een terugkerend thema is in CSS-ontwikkeling, is het niet de code dwingen om dingen te doen waarvoor het niet is bedoeld. Dit betekent het vermijden van CSS-hacks en het vinden van de eenvoudigste oplossing die mogelijk is.
Mijn vuistregel is dat als ik een breedte instel, ik geen marge of opvulling instel. Evenzo, als ik een marge of opvulling instel, stel ik geen breedte in. Omgaan met het doosmodel kan zo pijnlijk zijn, vooral als je te maken hebt met percentages. Daarom heb ik de breedte op de containers ingesteld en vervolgens marge en opvulling ingesteld op de elementen erin. Alles blijkt meestal zwemmend.
Jonathan's vuistregel is geweldig om ervoor te zorgen dat je lay-outs niet breken en dat de eenvoudigste benadering wordt gebruikt bij het maken van lay-outs met blokelementen.
Drijven is waarschijnlijk een van de belangrijkste dingen om te begrijpen met CSS, maar weten hoe je drijvers moet wissen, is ook noodzakelijk.
Trevor Davis is misschien niet zo'n grote naam als Zeldman of Snook in de designwereld, hij verdient zeker enige vermelding alleen gebaseerd op zijn uitstekende portfolio van weblay-outs. Zijn blog is een uitstekende bron voor elke webontwikkelaar die zijn ontwerpkrakers wil oppoetsen.
In het vlaggenschipartikel van Trevor, De 6 belangrijkste CSS-technieken die u moet weten, heeft hij een nugget toegevoegd die veel hoofdpijn kan besparen bij het gebruik van kolommen in uw lay-outs.
Ik heb een eenvoudige pagina gemaakt met twee zwevende kolommen naast elkaar. In het voorbeeld ziet u dat de grijze achtergrond geen zwevende kolommen bevat. Het gemakkelijkste is om het element te laten zweven. Maar nu ziet u dat de achtergrond van de container niet het inhoudsgebied bevat.
Omdat de container een marge heeft: 0 auto, willen we niet zweven omdat hij hem naar welke kant dan ook drijft. Dus een andere manier om de vlotter leeg te maken, is om een opruimelement in te voegen. In dit geval gebruik ik alleen een lege div-set om te wissen: beide. Nu zijn er andere manieren om een float leeg te maken zonder markup, maar ik heb een aantal inconsistenties opgemerkt met die techniek, dus ik offer gewoon een lege div.
Soms is het gemakkelijker om met de uitzondering op de regel om te gaan, in plaats van verklaringen toe te voegen voor alle andere elementen eromheen.
Het bedrijf SimpleBits van Dan Cederholm is een krachtpatser van een ontwerpbedrijf. Dan's werkte met mensen als:
... en veel andere spraakmakende webbedrijven. Gelukkig geeft Dan enkele van de kennis die hij heeft geleerd met deze enorme namen op zijn blog op SimpleBits door. Hier is een vuistregel voor jou, webontwerpers en ontwikkelaars: Als Dan Cederholm iets zegt, luister je. Zie hem als een digitale sherpa en leid je naar de top van je ontwerpberg.
Hoewel het contra-intuïtief kan lijken om een negatief te plaatsen voor elke aangifte (zoals margin-left: -5px), is het eigenlijk best een goed idee. Dhr. Cedarholm legt uit dat het gebruik van negatieve marges op elementen soms eenvoudiger is dan elk ander aspect van het ontwerp te moeten veranderen om het op dezelfde manier te laten aansluiten als u wilt.
Er zijn situaties waarin het gebruik van negatieve marges op een element de eenvoudigste manier is om het uit de rest te "duwen", door de uitzondering op de regel te behandelen om code te vereenvoudigen.
U kunt zijn voorbeeld van het juiste gebruik van negatieve marges hier zien.
"Hoe centreer ik een lay-out met een vaste breedte met behulp van CSS?" Voor degenen die weten, het is simpel. Voor degenen die dat niet doen, kan het frustrerend zijn om de twee noodzakelijke regels te vinden om de klus te klaren.
Het is geen verrassing dat Dan deze lijst twee keer gaat maken. Gecentreerde lay-outs zijn aan de oppervlakte een heel eenvoudig idee, maar om een of andere reden werken ze niet altijd even gemakkelijk als geadverteerd. Het centreren van lay-outs met CSS kan een frustrerende onderneming zijn voor een beginner als ze het nog nooit eerder hebben geprobeerd.
Dan heeft een beproefde methode die hij vaak gebruikt om gecentreerde lay-outnirvana te bereiken.
#container
marge: 0 auto;
breedte: xxxpx;
text-align: left;
Veel moderne ontwerpen vertrouwen op gecentreerde lay-outs, dus het gebruik van deze methode zal op een bepaald moment van pas komen voor webontwikkelaars en ontwerpers.
U hebt geldige XHTML en CSS geschreven. U hebt het W3C standaard Document Object Model (DOM) gebruikt om dynamische pagina-elementen te manipuleren. Toch faalt uw site in browsers die zijn ontworpen om deze standaarden te ondersteunen. Een defecte DOCTYPE is waarschijnlijk de schuldige.
Jeffrey Zeldman is een van de medeoprichters van de uitstekende bronnenwebsite A List Apart, mede-oprichter van en liep het Web Standards Project, runt de Happy Cog designstudio en schreef zelfs de boek over ontwerpen voor webstandaarden. Kortom, Zeldman bevindt zich in het hogere segment van webontwerpers.
De DOCTYPE van een webpagina is een van de meest over het hoofd geziene aspecten van ontwerp. Het gebruik van de juiste DOCTYPE is cruciaal en Zeldman legt uit waarom.
Het gebruik van een onvolledige of verouderde DOCTYPE - of helemaal geen DOCTYPE - werpt dezelfde browsers naar de "Quirks" -modus, waarbij de browser aanneemt dat je ouderwetse, ongeldige opmaak en code hebt geschreven volgens de deprimerende industrienormen van de late jaren negentig.
Zeldman benadrukt het belang van a) het daadwerkelijk gebruiken van een DOCTYPE, en wijst erop dat je een url in de verklaring moet toevoegen als volgt:
Als u onverklaarbare problemen met uw lay-outs vindt, is de kans groot dat de DOCTYPE het probleem is.
Centreren van items is een veel voorkomende taak bij het ontwerpen van websites. Maar voor mensen die nieuw zijn voor CSS is het vooral een soort raadsel hoe bijvoorbeeld een hele website gecentreerd moet worden in andere browsers dan IE.
Wolfgang Bartelme is een webdesigner met Bartelme design, een webontwerpbureau. Bartelme heeft een van de elegantste blogs en levert voortdurend uitstekend pictogram- en ontwerpwerk. Hij heeft ontwerpwerk gedaan voor het blogplatform Squarespace en de populaire softwarevoorziening MacHeist.
Wolfgang heeft een tutorial gemaakt die helpt bij de gecompliceerde taak van het centreren van elementen met CSS. Gecentreerde elementen zijn waanzinnig handig, maar zijn soms moeilijk te bereiken gezien het ontwerp. De zelfstudie van Bartelme zorgt voor gecentreerde afstemming door de juiste DOCTYPE te kiezen en door zijn CSS-voodoo toe te voegen. De code is niet leuk en krijgt de klus geklaard, en valt direct in het verlengde van het streven naar eenvoud in CSS.
Trenton Moss kent web usability. Hij heeft zijn eigen webbedrijf dat mensen opleidt in usability training en webschrijven. Hij schrijft ook voor sites zoals Sitepoint. Trenton geeft uitstekende tips op basis van zijn ervaring als web-gebruiksexpert.
Het is een simpel feit dat ontwerpen in de loop van de tijd veranderen, vooral in de manier waarop tekst op websites wordt weergegeven. Het beste dat een webontwikkelaar kan doen, is plannen voor de toekomst om ervoor te zorgen dat in plaats van de manier waarop tekst wordt weergegeven handmatig te worden gewijzigd, CSS het beste wordt gebruikt om de weergave van de tekst te wijzigen. Trenton Moss laat ons zien hoe dit te bereiken door het gebruik van een eenvoudig, onderbenut CSS-commando genaamd text-transfom.
Een van de minder bekende, maar echt bruikbare CSS-opdrachten is de opdracht voor het transformeren van tekst. Drie van de meer algemene waarden voor deze regel zijn: tekst-transformatie: hoofdletter, tekst-transformatie: kleine letters en tekst-transformatie: hoofdlettergebruik. De eerste regel verandert alle tekens in hoofdletters, de tweede verandert ze allemaal in kleine letters en de derde maakt de eerste letter van elk woord een hoofdletter..
Door CSS te gebruiken om de weergave van tekst op de site weer te geven, kan dit in de toekomst worden gewijzigd en blijven de dingen in de loop van de tijd consistent.
Deze opdracht is ongelooflijk handig om te zorgen voor consistentie in stijl op een hele website, vooral als het een aantal inhoudeditors heeft. Zeg bijvoorbeeld dat uw stijlgids dicteert dat woorden in koppen altijd met hoofdletters moeten beginnen. Gebruik text-transform: capitalize om ervoor te zorgen dat dit altijd het geval is. Zelfs als sitebewerkers het hoofdlettergebruik vergeten, verschijnt hun fout niet op de website.
Hoewel teksttransformatie een klein ding is om toe te voegen aan een css-lay-out, kan het in de toekomst een wereld van verschil maken wanneer er wijzigingen moeten worden aangebracht.
Glen Stansberry is een webontwikkelaar en blogger die meer worstelt dan hij zou willen toegeven met CSS. Je kunt meer tips over webontwikkeling lezen op zijn blog Web Jackalope.
Accentsconagua