CSS

De browser bepaalt welke stijlen op een element worden weergegeven, afhankelijk van de specificiteit van CSS-regels. We gaan ervan uit dat de browser de regels die overeenkomen met een bepaald element al heeft bepaald. Onder de overeenkomende regels wordt de specificiteit, vier kommagescheiden waarden, 'a, b, c, d', voor elke regel berekend op basis van het volgende:

1. 'a' is of inline stijlen worden gebruikt. Als de eigenschapsdeclaratie een inline stijl op het element is, is 'a' 1, anders 0.
2. 'b' is het aantal ID-selectors.
3. 'c' is het aantal klassen, attributen en pseudo-klassen selectors.
4. 'd' is het aantal tags en pseudo-elementen selectors.

De resulterende specificiteit is geen score, maar een matrix van waarden die kolom voor kolom kunnen worden vergeleken. Bij het vergelijken van selectors om te bepalen welke de hoogste specificiteit heeft, kijkt u van links naar rechts en vergelijkt u de hoogste waarde in elke kolom. Dus een waarde in kolom 'b' overschrijft waarden in kolommen 'c' en 'd', ongeacht wat deze ook mogen zijn. Als zodanig zou specificiteit van '0,1,0,0' groter zijn dan die van '0,0,10,10'.

In gevallen van gelijke specificiteit: de laatste regel is degene die telt. Als u dezelfde regel tweemaal in uw stylesheet hebt geschreven (ongeacht of deze intern of extern is), dan is de onderste regel in uw stylesheet dichter bij het te stylen element, wordt deze als specifieker beschouwd en zal daarom worden toegepast.

Ik zou CSS-regels schrijven met lage specificiteit, zodat ze indien nodig gemakkelijk kunnen worden overschreven. Bij het schrijven van CSS UI-componentbibliotheekcode is het belangrijk dat deze lage specificiteiten hebben, zodat gebruikers van de bibliotheek ze kunnen overschrijven zonder al te ingewikkelde CSS-regels te gebruiken alleen om de specificiteit te verhogen of hun toevlucht te nemen tot '!important'.

• Resetten - Resetten is bedoeld om alle standaard browserstijlen op elementen te verwijderen. Bijvoorbeeld: 'margin's, 'padding's, 'font-size's van alle elementen worden gereset om hetzelfde te zijn. U zult styling voor veelvoorkomende typografische elementen opnieuw moeten declareren.
• Normaliseren - Normaliseren behoudt nuttige standaardstijlen in plaats van alles 'ongestileerd' te maken. Het corrigeert ook bugs voor veelvoorkomende browserafhankelijkheden.

Ik zou kiezen voor resetten wanneer ik een zeer aangepast of onconventioneel siteontwerp heb, zodat ik veel van mijn eigen styling moet doen en geen standaardstyling hoef te behouden.

Float is een CSS-positioneringseigenschap. Floated elementen blijven deel uitmaken van de paginastroom en beïnvloeden de positionering van andere elementen (bijv. tekst zal rond floated elementen vloeien), in tegenstelling tot 'position: absolute' elementen, die uit de paginastroom worden verwijderd.

De CSS-eigenschap 'clear' kan worden gebruikt om onder 'left'/'right'/'both' floated elementen te worden geplaatst.

Als een bovenliggend element niets anders dan floated elementen bevat, zal de hoogte ervan tot niets worden samengevouwen. Dit kan worden opgelost door de float te clearen na de floated elementen in de container, maar vóór het sluiten van de container.

De '.clearfix' hack gebruikt een slimme CSS-pseudo-selector ('::after') om floats te clearen. In plaats van de overflow in te stellen op het bovenliggende element, past u er een extra klasse 'clearfix' op toe. Pas vervolgens deze CSS toe:

.clearfix::after {
  content: ' ';
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}

Als alternatief kunt u de eigenschap 'overflow: auto' of 'overflow: hidden' aan het bovenliggende element geven, wat een nieuwe block formatting context binnen de kinderen zal creëren en het zal zich uitbreiden om zijn kinderen te bevatten.

De 'z-index' eigenschap in CSS regelt de verticale stapelvolgorde van overlappende elementen. 'z-index' beïnvloedt alleen elementen die een 'position' waarde hebben die niet 'static' is.

Zonder enige 'z-index' waarde stapelen elementen zich in de volgorde waarin ze in de DOM verschijnen (het laagste element op hetzelfde hiërarchische niveau verschijnt bovenaan). Elementen met niet-statische positionering (en hun kinderen) zullen altijd boven elementen met standaard statische positionering verschijnen, ongeacht de HTML-hiërarchie.

Een stapelcontext is een element dat een reeks lagen bevat. Binnen een lokale stapelcontext worden de 'z-index' waarden van de kinderen ingesteld ten opzichte van dat element in plaats van ten opzichte van de documentroot. Lagen buiten die context - d.w.z. sibling elementen van een lokale stapelcontext - kunnen niet tussen lagen daarbinnen zitten. Als een element B bovenop element A zit, kan een kindelement van element A, element C, nooit hoger zijn dan element B, zelfs als element C een hogere 'z-index' heeft dan element B.

Elke stapelcontext is zelfstandig - nadat de inhoud van het element is gestapeld, wordt het hele element beschouwd in de stapelvolgorde van de bovenliggende stapelcontext. Een handvol CSS-eigenschappen activeren een nieuwe stapelcontext, zoals 'opacity' kleiner dan 1, 'filter' dat niet 'none' is, en 'transform' dat niet 'none' is.

_Opmerking: Wat precies een element kwalificeert om een stapelcontext te creëren, wordt vermeld in deze lange reeks [regels].

Een Block Formatting Context (BFC) is onderdeel van de visuele CSS-weergave van een webpagina waarin block-boxes worden opgemaakt. Floats, absoluut gepositioneerde elementen, 'inline-blocks', 'table-cells', 'table-caption's en elementen met 'overflow' anders dan 'visible' (behalve wanneer die waarde is doorgegeven aan de viewport) creëren nieuwe block formatting contexts.

Het is belangrijk om te weten hoe je een block formatting context tot stand brengt, want zonder dat te doen, zal de bevattende box [geen floated children bevatten]. Dit is vergelijkbaar met het ineenstorten van marges, maar geniepiger, omdat je hele boxes op vreemde manieren zult zien ineenstorten.

Een BFC is een HTML-box die voldoet aan ten minste één van de volgende voorwaarden:

• De waarde van 'float' is niet 'none'.
• De waarde van 'position' is noch 'static' noch 'relative'.
• De waarde van 'display' is 'table-cell', 'table-caption', 'inline-block', 'flex', of 'inline-flex', 'grid', of 'inline-grid'.
• De waarde van 'overflow' is niet 'visible'.

In een BFC raakt de linker buitenrand van elke box de linkerrand van de bevattende box (voor rechts-naar-links opmaak raken de rechterranden elkaar).

Verticale marges tussen aangrenzende block-level boxes in een BFC storten in. Lees meer over [collapsing margins].

• Lege 'div' methode - '<div style="clear:both;"></div>'.
• Clearfix methode - Raadpleeg de '.clearfix' klasse hierboven.
• 'overflow: auto' of 'overflow: hidden' methode - Het bovenliggende element zal een nieuwe block formatting context creëren en zich uitbreiden om zijn zwevende kinderen te bevatten.

In grote projecten zou ik een utility '.clearfix' klasse schrijven en deze gebruiken op plaatsen waar ik het nodig heb. 'overflow: hidden' kan kinderen afkappen als de kinderen groter zijn dan de ouder en is niet erg ideaal.

CSS-sprites combineren meerdere afbeeldingen tot één enkele grotere afbeelding. Het is een veelgebruikte techniek voor iconen (Gmail gebruikt het). Hoe het te implementeren:

1. Gebruik een sprite generator die meerdere afbeeldingen in één pakt en de juiste CSS ervoor genereert.
2. Elke afbeelding zou een corresponderende CSS-klasse hebben met gedefinieerde 'background-image', 'background-position' en 'background-size' eigenschappen.
3. Om die afbeelding te gebruiken, voegt u de corresponderende klasse toe aan uw element.

Voordelen:

• Vermindert het aantal HTTP-verzoeken voor meerdere afbeeldingen (slechts één enkel verzoek is vereist per spritesheet). Maar met HTTP2 is het laden van meerdere afbeeldingen niet langer een groot probleem.
• Vooraf downloaden van assets die pas gedownload zullen worden wanneer ze nodig zijn, zoals afbeeldingen die alleen verschijnen bij ':hover' pseudo-states. Knipperen zou niet zichtbaar zijn.

• Na het identificeren van het probleem en de boosdoener-browser, gebruikt u een apart stylesheet dat alleen wordt geladen wanneer die specifieke browser wordt gebruikt. Deze techniek vereist echter server-side rendering.
• Gebruik bibliotheken zoals Bootstrap die deze stylingproblemen al voor u afhandelen.
• Gebruik 'autoprefixer' om automatisch vendor-prefixes aan uw code toe te voegen.
• Gebruik Reset CSS of Normalize.css.
• Als u Postcss (of een vergelijkbare transpiling-bibliotheek) gebruikt, zijn er mogelijk plugins waarmee u moderne CSS-syntaxis (en zelfs W3C-voorstellen) kunt gebruiken die die delen van uw code zullen transformeren in corresponderende veilige code die zal werken in de doelen die u hebt gebruikt.

• Graceful degradation - De praktijk van het bouwen van een applicatie voor moderne browsers, terwijl ervoor wordt gezorgd dat deze functioneel blijft in oudere browsers.
• Progressive enhancement - De praktijk van het bouwen van een applicatie voor een basisniveau van gebruikerservaring, maar het toevoegen van functionele verbeteringen wanneer een browser dit ondersteunt.
• Gebruik [caniuse.com] om te controleren op functieondersteuning.
• Autoprefixer voor automatische invoeging van vendor-prefixes.
• Functiedetectie met [Modernizr].
• Gebruik CSS Feature queries [@support]

Deze technieken zijn gerelateerd aan toegankelijkheid (a11y).

• 'width: 0; height: 0'. Zorg ervoor dat het element helemaal geen ruimte inneemt op het scherm, waardoor het niet wordt weergegeven.
• 'position: absolute; left: -99999px'. Positioneer het buiten het scherm.
• 'text-indent: -9999px'. Dit werkt alleen op tekst binnen de 'block' elementen. Dit is een veelgebruikte en beroemde truc, maar het heeft [enkele nadelen], zoals het veroorzaken van prestatieproblemen, dus u kunt overwegen om in plaats daarvan 'text-indent: 100%' te gebruiken.
• Metatags. Bijvoorbeeld door gebruik te maken van Schema.org, RDF en JSON-LD.
• WAI-ARIA. Een W3C technische specificatie die aangeeft hoe de toegankelijkheid van webpagina's kan worden vergroot.

Zelfs als WAI-ARIA de ideale oplossing is, zou ik kiezen voor de 'absolute' positioneringsaanpak, omdat deze de minste valkuilen heeft, werkt voor de meeste elementen en een gemakkelijke techniek is.

Voordat Flex populair werd (rond 2014), was het op 'float' gebaseerde grid-systeem het meest betrouwbaar omdat het nog steeds de meeste browserondersteuning had onder de alternatieve bestaande systemen (flex, grid). Bootstrap gebruikte de 'float' aanpak tot Bootstrap 4, dat overstapte op de 'flex'-gebaseerde aanpak. Op het moment van schrijven (2020) is 'flex' de aanbevolen aanpak voor het bouwen van grid-systemen en heeft het [goede browserondersteuning].

Voor de avontuurlijke mensen kunnen ze kijken naar [CSS Grid Layout], dat de glimmende nieuwe 'grid'-eigenschap gebruikt; het is zelfs beter dan 'flex' voor het bouwen van grid-layouts en zal in de toekomst de de facto manier zijn om dit te doen.

Ja. Een voorbeeld zou het transformeren van een gestapelde pillennavigatie in een vastgepinde tabnavigatie onderaan de pagina voorbij een bepaald breekpunt zijn.

Ja, er zijn verschillende manieren om vormen te kleuren (inclusief het specificeren van attributen op het object) met behulp van inline CSS, een ingebedde CSS-sectie of een extern CSS-bestand. De meeste SVG's die u op het web zult vinden, gebruiken inline CSS, maar elk type heeft voor- en nadelen.

Basiskleuring kan worden gedaan door twee attributen op het knooppunt in te stellen: 'fill' en 'stroke'. 'fill' stelt de kleur in binnen het object en 'stroke' stelt de kleur van de lijn in die om het object is getekend. U kunt dezelfde CSS-kleurnamen gebruiken die u in HTML gebruikt, of dat nu kleurnamen zijn (dat wil zeggen 'red'), RGB-waarden (dat wil zeggen 'rgb(255,0,0)'), Hex-waarden, RGBA-waarden, enz.

<rect
  x="10"
  y="10"
  width="100"
  height="100"
  stroke="blue"
  fill="purple"
  fill-opacity="0.5"
  stroke-opacity="0.8" />

De bovenstaande 'fill="purple"' is een voorbeeld van een presentatieattribuut. Interessant is dat, in tegenstelling tot inline stijlen zoals 'style="fill: purple"' wat ook een attribuut is, presentatieattributen [kunnen worden overschreven door CSS]-stijlen die in een stylesheet zijn gedefinieerd. Dus als u zoiets als 'svg { fill: blue; }' zou doen, zou dit de paarse vulling die we hebben gedefinieerd overschrijven.

Ja, er zijn vier typen @media-eigenschappen (inclusief screen):

• 'all' - voor alle media-type apparaten
• 'print' - voor printers
• 'speech' - voor schermlezers die de pagina hardop 'lezen'
• 'screen' - voor computerschermen, tablets, smartphones etc.

Hier is een voorbeeld van het gebruik van 'print' media type:

@media print {
  body {
    color: black;
  }
}

Ten eerste, begrijp dat browsers selectors van rechts naar links (sleutelselector) matchen. Browsers filteren elementen in de DOM op basis van de sleutelselector en doorlopen de bovenliggende elementen om overeenkomsten te bepalen. Hoe korter de lengte van de selector-keten, hoe sneller de browser kan bepalen of dat element overeenkomt met de selector. Vermijd daarom sleutelselectors die tag- en universele selectors zijn. Ze matchen een groot aantal elementen en browsers zullen meer werk moeten verrichten om te bepalen of de bovenliggende elementen wel matchen.

[BEM (Block Element Modifier)] methodologie raadt aan dat alles een enkele klasse heeft, en, waar je hiërarchie nodig hebt, dat ook in de naam van de klasse wordt verwerkt, dit maakt de selector natuurlijk efficiënt en gemakkelijk te overschrijven.

Wees u bewust van welke CSS-eigenschappen [reflow, repaint en compositing] activeren. Vermijd waar mogelijk stijlen te schrijven die de lay-out wijzigen (reflow activeren).

Voordelen:

• CSS wordt beter onderhoudbaar.
• Gemakkelijk om geneste selectors te schrijven.
• Variabelen voor consistente theming. Kan themabestanden delen over verschillende projecten heen.
• Mixins om herhaalde CSS te genereren.
• Sass-functies zoals loops, lijsten en maps kunnen configuratie eenvoudiger en minder omslachtig maken.
• Uw code opsplitsen in meerdere bestanden. CSS-bestanden kunnen ook worden opgesplitst, maar dit vereist dan een HTTP-verzoek om elk CSS-bestand te downloaden.

Nadelen:

• Vereist tools voor preprocessing. Hercompilatietijd kan langzaam zijn.
• Niet het schrijven van huidige en potentieel bruikbare CSS. Bijvoorbeeld, door iets als [postcss-loader] met [webpack] te gebruiken, kunt u potentieel toekomstbestendige CSS schrijven, waardoor u dingen als CSS-variabelen kunt gebruiken in plaats van Sass-variabelen. Zo leert u nieuwe vaardigheden die hun vruchten kunnen afwerpen als/wanneer ze worden gestandaardiseerd.

Voordelen:

• Vooral de hierboven genoemde voordelen.
• Er is minder geschreven in JavaScript, wat goed werkt met Node.

Nadelen:

• Ik gebruik Sass via 'node-sass', wat een binding is voor LibSass geschreven in C++. Ik moet het vaak opnieuw compileren bij het wisselen tussen Node-versies.
• In Less worden variabelenamen voorafgegaan door '@', wat kan worden verward met native CSS-trefwoorden zoals '@media', '@import' en '@font-face' regel.

Gebruik '@font-face' en definieer 'font-family' voor verschillende 'font-weight's.

Dit deel is gerelateerd aan het bovenstaande over efficiënte CSS schrijven. Browsers matchen selectors van rechts naar links (sleutelselector). Browsers filteren elementen in de DOM op basis van de sleutelselector en doorlopen de bovenliggende elementen om overeenkomsten te bepalen. Hoe korter de lengte van de selector-keten, hoe sneller de browser kan bepalen of dat element overeenkomt met de selector.

Bijvoorbeeld met deze selector 'p span', browsers vinden eerst alle '<span>' elementen en doorlopen de bovenliggende elementen helemaal tot aan de root om het '<p>' element te vinden. Voor een bepaalde '<span>', zodra het een '<p>' vindt, weet het dat de '<span>' overeenkomt en kan het stoppen met matchen.

Een CSS-pseudo-element is een trefwoord dat wordt toegevoegd aan een selector waarmee u een specifiek deel van het/de geselecteerde element(en) kunt stylen. Ze kunnen worden gebruikt voor decoratie (':first-line', ':first-letter') of het toevoegen van elementen aan de markup (gecombineerd met 'content: ...') zonder de markup te hoeven wijzigen (':before', ':after').

• ':first-line' en ':first-letter' kunnen worden gebruikt om tekst te decoreren.
• Gebruikt in de '.clearfix' hack zoals hierboven getoond om een nul-ruimte element toe te voegen met 'clear: both'.
• Driehoekige pijlen in tooltips gebruiken ':before' en ':after'. Bevordert scheiding van belangen omdat de driehoek wordt beschouwd als onderdeel van styling en niet echt de DOM.

Het CSS-boxmodel beschrijft de rechthoekige boxen die worden gegenereerd voor elementen in de documentboom en worden opgemaakt volgens het visuele opmaakmodel. Elke box heeft een inhoudsgebied (bijv. tekst, een afbeelding, enz.) en optionele omringende 'padding', 'border' en 'margin' gebieden.

Het CSS-boxmodel is verantwoordelijk voor het berekenen van:

• Hoeveel ruimte een block-element inneemt.
• Of borders en/of margins overlappen, of ineenstorten.
• De afmetingen van een box.

Het boxmodel heeft de volgende regels:

• De afmetingen van een block-element worden berekend door 'width', 'height', 'padding', 'border's en 'margin's.
• Als er geen 'height' is opgegeven, zal een block-element zo hoog zijn als de inhoud die het bevat, plus 'padding' (tenzij er floats zijn, waarvoor zie hieronder).
• Als er geen 'width' is opgegeven, zal een niet-floatend block-element uitbreiden om de breedte van zijn bovenliggende element te passen minus 'padding'.
• De 'height' van een element wordt berekend door de 'height' van de inhoud.
• De 'width' van een element wordt berekend door de 'width' van de inhoud.
• Standaard maken 'padding's en 'border's geen deel uit van de 'width' en 'height' van een element.

• Standaard hebben elementen 'box-sizing: content-box' toegepast, en alleen de inhoudsgrootte wordt in aanmerking genomen.
• 'box-sizing: border-box' verandert de manier waarop de 'width' en 'height' van elementen worden berekend, 'border' en 'padding' worden ook opgenomen in de berekening.
• De 'height' van een element wordt nu berekend door de 'height' van de inhoud + verticale 'padding' + verticale 'border' breedte.
• De 'width' van een element wordt nu berekend door de 'width' van de inhoud + horizontale 'padding' + horizontale 'border' breedte.
• Het in aanmerking nemen van 'padding's en 'border's als onderdeel van ons boxmodel komt beter overeen met hoe ontwerpers zich inhoud in rasters voorstellen.

• 'none', 'block', 'inline', 'inline-block', 'flex', 'grid', 'table', 'table-row', 'table-cell', 'list-item'.

| 'display' | Beschrijving | | :-- | :-- | | 'none' | Geeft een element niet weer (het element beïnvloedt de lay-out van het document niet langer). Alle kinderelementen worden ook niet langer weergegeven. Het document wordt weergegeven alsof het element niet in de documentboom bestond | | 'block' | Het element verbruikt de hele lijn in de blokrichting (wat meestal horizontaal is) | | 'inline' | Elementen kunnen naast elkaar worden geplaatst | | 'inline-block' | Vergelijkbaar met 'inline', maar staat enkele 'block' eigenschappen toe, zoals het instellen van 'width' en 'height' | | 'table' | Gedraagt zich als het '<table>' element | | 'table-row' | Gedraagt zich als het '<tr>' element | | 'table-cell' | Gedraagt zich als het '<td>' element | | 'list-item' | Gedraagt zich als een '<li>' element, waardoor het 'list-style-type' en 'list-style-position' kan definiëren |

Ik zal er voor de volledigheid ook een vergelijking met 'block' in gooien.

| | 'block' | 'inline-block' | 'inline' | | --- | --- | --- | --- | | Grootte | Vult de breedte van zijn bovenliggende container. | Afhankelijk van inhoud. | Afhankelijk van inhoud. | | Positionering | Begint op een nieuwe regel en tolereert geen HTML-elementen ernaast (behalve wanneer u 'float' toevoegt) | Vloeit mee met andere inhoud en staat andere elementen ernaast toe. | Vloeit mee met andere inhoud en staat andere elementen ernaast toe. | | Kan 'width' en 'height' specificeren | Ja | Ja | Nee. Wordt genegeerd als het wordt ingesteld. | | Kan worden uitgelijnd met 'vertical-align' | Nee | Ja | Ja | | Marges en opvulling | Alle zijden gerespecteerd. | Alle zijden gerespecteerd. | Alleen horizontale zijden gerespecteerd. Verticale zijden, indien gespecificeerd, beïnvloeden de lay-out niet. Verticale ruimte die het inneemt, is afhankelijk van 'line-height', hoewel de 'border' en 'padding' visueel rond de inhoud verschijnen. | | Float | - | - | Wordt als een 'block' element waar u verticale marges en opvulling kunt instellen. |

Een gepositioneerd element is een element waarvan de berekende 'position' eigenschap 'relative', 'absolute', 'fixed' of 'sticky' is.

• 'static' - De standaardpositie; het element zal op de pagina vloeien zoals het normaal zou doen. De 'top', 'right', 'bottom', 'left' en 'z-index' eigenschappen zijn niet van toepassing.
• 'relative' - De positie van het element wordt aangepast ten opzichte van zichzelf, zonder de lay-out te wijzigen (en laat daardoor een gat achter voor het element waar het zou zijn geweest als het niet gepositioneerd was).
• 'absolute' - Het element wordt uit de paginastroom verwijderd en op een opgegeven positie geplaatst ten opzichte van zijn dichtstbijzijnde gepositioneerde voorouder, indien aanwezig, of anders ten opzichte van het initiële bevattende blok. Absoluut gepositioneerde boxen kunnen marges hebben, en deze storten niet in met andere marges. Deze elementen beïnvloeden de positie van andere elementen niet.
• 'fixed' - Het element wordt uit de paginastroom verwijderd en op een opgegeven positie geplaatst ten opzichte van de viewport en beweegt niet bij het scrollen.
• 'sticky' - Sticky positionering is een hybride van relatieve en vaste positionering. Het element wordt behandeld als 'relative' gepositioneerd totdat het een gespecificeerde drempel overschrijdt, waarna het wordt behandeld als 'fixed' gepositioneerd.

• Bootstrap - Langzame releasecyclus. Bootstrap 4 is al bijna 2 jaar in alpha. Voeg een spinner button component toe, aangezien deze veel wordt gebruikt.
• Semantic UI - De structuur van de broncode maakt het aanpassen van thema's extreem moeilijk te begrijpen. Het onconventionele themingsysteem is een Pijn om aan te passen. Hardcoded config pad binnen de vendor library. Niet goed ontworpen voor het overschrijven van variabelen, in tegenstelling tot Bootstrap.
• Bulma - Veel niet-semantische en overbodige klassen en markup vereist. Niet achterwaarts compatibel. Het upgraden van versies breekt de app op subtiele manieren.

Ja. Flexbox is voornamelijk bedoeld voor 1-dimensionale lay-outs, terwijl Grid bedoeld is voor 2-dimensionale lay-outs.

Flexbox lost veel voorkomende problemen in CSS op, zoals verticaal centreren van elementen binnen een container, sticky footer, enz. Bootstrap en Bulma zijn gebaseerd op Flexbox, en het is waarschijnlijk de aanbevolen manier om tegenwoordig lay-outs te maken. Heb Flexbox eerder geprobeerd, maar stuitte op enkele browserincompatibiliteitsproblemen (Safari) bij het gebruik van 'flex-grow', en ik moest mijn code herschrijven met behulp van 'inline-blocks' en wiskunde om de breedtes in percentages te berekenen, het was geen prettige ervaring.

Grid is verreweg de meest intuïtieve benadering voor het maken van op rasters gebaseerde lay-outs (het moet wel!) maar de browserondersteuning is op dit moment nog niet wijdverspreid.

Merk op dat deze twee benaderingen niet exclusief zijn.

Het responsief maken van een website betekent dat sommige elementen zullen reageren door hun grootte of andere functionaliteit aan te passen aan de schermgrootte van het apparaat, typisch de viewportbreedte, via CSS media queries, bijvoorbeeld door de lettergrootte kleiner te maken op kleinere apparaten.

@media (min-width: 601px) {
  .my-class {
    font-size: 24px;
  }
}

@media (max-width: 600px) {
  .my-class {
    font-size: 12px;
  }
}

Een mobile-first strategie is ook responsief, maar het is van mening dat we standaard alle stijlen voor mobiele apparaten moeten definiëren en pas later specifieke responsieve regels voor andere apparaten moeten toevoegen. Volgens het vorige voorbeeld:

.my-class {
  font-size: 12px;
}

@media (min-width: 600px) {
  .my-class {
    font-size: 24px;
  }
}

Een mobile-first strategie heeft 2 belangrijke voordelen:

• Het is performanter op mobiele apparaten, omdat alle regels die erop worden toegepast niet gevalideerd hoeven te worden tegen media queries.
• Het dwingt om schonere code te schrijven met betrekking tot responsieve CSS-regels.

Zowel responsief als adaptief ontwerp proberen de gebruikerservaring op verschillende apparaten te optimaliseren, aanpassend aan verschillende viewport-groottes, resoluties, gebruikscontexten, besturingsmechanismen, enzovoort.

Responsief ontwerp werkt volgens het principe van flexibiliteit - één vloeiende website die er goed uit kan zien op elk apparaat. Responsieve websites gebruiken media queries, flexibele rasters en responsieve afbeeldingen om een gebruikerservaring te creëren die flexibel is en verandert op basis van een veelheid aan factoren. Zoals één enkele bal die groeit of krimpt om door verschillende hoepels te passen.

Adaptief ontwerp lijkt meer op de moderne definitie van progressieve verbetering. In plaats van één flexibel ontwerp, detecteert adaptief ontwerp het apparaat en andere kenmerken en biedt vervolgens de juiste functie en lay-out op basis van een vooraf gedefinieerde reeks viewport-groottes en andere kenmerken. De site detecteert het type apparaat dat wordt gebruikt en levert de vooraf ingestelde lay-out voor dat apparaat. In plaats van één enkele bal die door verschillende hoepels van verschillende grootte gaat, zou je verschillende ballen hebben om te gebruiken, afhankelijk van de hoepelgrootte.

Beide methoden hebben enkele problemen die moeten worden afgewogen:

• Responsief ontwerp kan behoorlijk uitdagend zijn, aangezien je in wezen één, weliswaar responsieve lay-out gebruikt om in alle situaties te passen. Hoe de media query breakpoints in te stellen, is zo'n uitdaging. Gebruikt u gestandaardiseerde breakpoint-waarden? Of gebruikt u breakpoints die zinvol zijn voor uw specifieke lay-out? Wat als die lay-out verandert?
• Adaptief ontwerp vereist over het algemeen user agent sniffing, of DPI-detectie, enz., die allemaal onbetrouwbaar kunnen blijken te zijn.

Retina is slechts een marketingterm om te verwijzen naar schermen met hoge resolutie en een pixelverhouding groter dan 1. Het belangrijkste om te weten is dat het gebruik van een pixelverhouding betekent dat deze schermen een lagere resolutie emuleren om elementen met dezelfde grootte weer te geven. Tegenwoordig beschouwen we alle mobiele apparaten retina de facto schermen.

Browsers renderen DOM-elementen standaard volgens de apparaatresolutie, behalve afbeeldingen.

Om scherpe, mooi uitziende afbeeldingen te hebben die het beste uit retinaschermen halen, moeten we waar mogelijk afbeeldingen met hoge resolutie gebruiken. Het altijd gebruiken van afbeeldingen met de hoogste resolutie zal echter een impact hebben op de prestaties, aangezien er meer bytes over de draad moeten worden verzonden.

Om dit probleem te omzeilen, kunnen we responsieve afbeeldingen gebruiken, zoals gespecificeerd in HTML5. Het vereist het beschikbaar stellen van verschillende resolutiebestanden van dezelfde afbeelding aan de browser en deze laten beslissen welke afbeelding het beste is, met behulp van het html-attribuut 'srcset' en optioneel 'sizes', bijvoorbeeld:

<div responsive-background-image>
  <img
    src="/images/test-1600.jpg"
    sizes="
      (min-width: 768px) 50vw,
      (min-width: 1024px) 66vw,
      100vw"
    srcset="
      /images/test-400.jpg   400w,
      /images/test-800.jpg   800w,
      /images/test-1200.jpg 1200w
    " />
</div>

Het is belangrijk op te merken dat browsers die HTML5's 'srcset' niet ondersteunen (d.w.z. IE11) het zullen negeren en in plaats daarvan 'src' zullen gebruiken. Als we IE11 echt moeten ondersteunen en we deze functie om prestatieredenen willen bieden, kunnen we een JavaScript polyfill gebruiken, bijv.

Voor iconen zou ik er ook voor kiezen om SVG's en icon fonts te gebruiken waar mogelijk, aangezien deze zeer scherp renderen, ongeacht de resolutie.

'translate()' is een waarde van CSS 'transform'. Het wijzigen van 'transform' of 'opacity' activeert geen browser reflow of repaint, maar activeert wel composities; terwijl het wijzigen van de absolute positionering 'reflow' activeert. 'transform' zorgt ervoor dat de browser een GPU-laag voor het element creëert, maar het wijzigen van absolute positioneringseigenschappen gebruikt de CPU. Daarom is 'translate()' efficiënter en zal het leiden tot kortere rendertijden voor vloeiendere animaties.

Bij het gebruik van 'translate()' neemt het element nog steeds zijn oorspronkelijke ruimte in beslag (een beetje zoals 'position: relative'), in tegenstelling tot het wijzigen van de absolute positionering.