CSS Grid in IE: Vervalsen van een Auto-Plaatsen Raster met Hiaten

0
13

Dit is het derde en laatste deel in een driedelige serie over het gebruik van CSS grid veilig in Internet Explorer 11 (IE11) zonder gek te worden.

In Deel 1, bedekte ik enkele van de veel voorkomende misvattingen die mensen hebben over IE11 native CSS grid implementatie. In Deel 2, ik liet de wereld zien hoe makkelijk het eigenlijk is om te schrijven IE-vriendelijke CSS grid code.

Vandaag ga ik stap weg van CSS grid voor een moment aan te tonen u een flexbox techniek die repliceert basis CSS grid auto-plaatsing functionaliteit. Deze CSS grid replica zal ook uitzien als een raster-gap is toegepast. Ik moet super wel duidelijk: dit gaat niet over hoe te maken van de werkelijke CSS grid automatische plaatsing werkt in IE.

Serie Artikelen:

  1. Debunking Common IE Raster Misvattingen
  2. CSS Grid en de nieuwe Autoprefixer
  3. Het vervalsen van een auto-plaatsing rooster met gaten (Deze Post)

Hoe maak je een nep-grid cel met hiaten

Stap 1: HTML

Ik zal gebruik maken van deze HTML als voorbeeld:

<div class=”grid-wrapper”>

<div class=”grid”>
<div class=”grid-cel”></div>
<div class=”grid-cel”></div>
<div class=”grid-cel”></div>
<div class=”grid-cel”></div>
<div class=”grid-cel”></div>
<div class=”grid-cel”></div>
</div>

</div>
Stap 2: Border-box box-sizing

Het eerste ding dat we moeten doen in de CSS zorg ervoor dat alle vakjes worden aangepast op basis van border-box in plaats van inhoud-box. De beste manier om dat te doen is met behulp van de box-sizing: border-box erfenis techniek:

html {
box-sizing: border-box;
}

*, *::voor, *::after {
box-sizing: erven;
}

Dat zal wereldwijd worden toegepast. Als u werkt op een bestaand project dat geen box-sizing ingesteld op border-box, vervang dan in de html-fragment van een kiezer die zich richt op het element dat je wilt om te zetten in een rooster.

Stap 3: Flex

Volgende, moet u op een aantal flexbox instellingen:

.raster {
/* Krachten gelijk cel heights */
display: flex;
flex-wrap: wrap;
}
Stap 4: Breedtes

Stel nu uw kolom breedtes. We maken onszelf een eenvoudige drie-raster:

.grid-cel {
/* Hiermee wordt aantal kolommen */
breedte: calc(100% / 3); /* calc() methode */
breedte: 33.33%; /* percentage methode */
}

De calc() methode maakt het mogelijk de breedte van de kolommen worden gewijzigd met een beetje meer gemakkelijk. Geef je aan hoeveel kolommen je wilt en de browser doet het rekenwerk voor u. Dit is vooral handig voor wanneer u een groter aantal kolommen, zoals 7 of 8. De browser ondersteuning voor calc() is sterk, maar niet zo sterk als een raw-percentage waarde die werden ondersteund door browsers sinds het begin van de CSS.

Deze browser ondersteunt data is van Caniuse, die heeft meer detail. Een aantal geeft aan dat browser ondersteunt de functie aan die versie.

Desktop

ChromeOperaFirefoxIEEdgeSafari
19* 15 4* 10 12 6*

Mobiele / Tablet

iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox
6.0-6.1* 46 Geen 67 67 60

De percentage methode heeft iets betere browser ondersteuning en kan een beetje meer stabiel in IE. Als u niet nodig hebt ter ondersteuning van Opera Mini, ik zou nog steeds aanbevelen gaan met de calc() methode voor het eerst. Testen in IE, en als de layout breekt, moet u eerst proberen met behulp van 99,999% in plaats van 100% in de calc functie (calc(99.999% / 3)). Als dat niet werkt, probeer dan over te schakelen naar de percentage methode. Ik zal met behulp van de calc() methode in al mijn voorbeelden. Merk op dat als u gebruik maakt van een CSS pre-processor zoals SCSS, kunt u het beste van beide werelden door het verkrijgen van de pre-processor voor de wiskunde. Dit gaat ten kosten van het niet gemakkelijk in staat om te bewerken of de kolom telt in browser-dev-tools.

/* Set kolom tellen SCSS */
.grid-cel {
breedte: (100% / 3);
}

/* CSS-uitvoer in de browser */
.grid-cel {
breedte: 33.3333333333%;
}

Laten we het grid cellen bepaalde hoogte en een innerlijke box-shadow, zodat we kunnen zien wat er aan de hand is. Ik ben niet toevoegen grens — ik gebruik dat later. 😉

.grid-cel {
/ * , Zodat we kunnen zien de grid cellen */
box-shadow: inzet 0 0 0 1px #000;
hoogte: 100px;
}

.grid-wrapper {
/* Stelt ons in staat om de randen van het rooster */
box-shadow: 0 0 2px 10px groen;
}

Je moet nu iets dat eruit ziet als dit:

Een eenvoudige 3 x 2 raster met gaten

Dat is saai, hoewel, toch? Iedereen weet hoe dat te doen. Waar zijn deze grid gaten houd ik het over heb? Ik wil mijn gaten!!!

Stap 5: Grens

Hier komen we bij het interessante deel. Sinds we stellen box-sizing te border-box, het belang van 33,33% breedte is nu voorzien van de grens. Wat dit betekent is dat we kunnen beginnen met het veilig mengen van vaste en percentage op basis van eenheden! 😃

.raster {
/ * * * Maakt een gelijk buitenste gap */
padding: 20px 0 0 20px;
}

.grid-cel {
/ * * * Maakt hiaten */
border: 0 solid transparant;
border-width: 0 20px 20px 0;
}

Dit resulteert in iets dat lijkt op een grid met gelijke tussenruimte overal:

Een 3 x 2-grid met gelijke ruimte tussen elke cel en de buitenste randen van het rooster

Om u een beter idee van wat er gaande is, neem een kijkje op de volgende afbeelding:

Kleur-gecodeerde diagram van het raster

Het blauwe gebied op de boven-en linkerzijde van het raster is de padding .raster-element. De gele contouren toont het gebied dat elk .grid-cel element in beslag neemt. De rode gebieden op de onder-en rechterkant van elke cel zijn de grens voor elk .grid-cel element.

Dat is misschien de look die u eigenlijk wilt. Aan de andere kant, dat is niet wat een grid met een raster-gap instelling eruit ziet. Dat is de reden waarom we hebben nog een stap verder.

Stap 6: Marge en overloop

Om het raster te drukken hard tegen de randen van de container, we hebben een beetje hulp van negatieve marges en overflow: hidden:

.raster {
/* Trekt grid cellen hard tegen de randen */
marge: -20px;
}

.grid-wrapper {
/* Voorkomt oneven marge gedrag */
overflow: hidden;
}

We moeten toepassen overflow: hidden te voorkomen dat dit gebeurt:

Boven-en onderkant negatieve marge wordt genegeerd als overloop is niet verborgen

De toepassing van de negatieve marge en overflow: hidden zal voor ons naar deze prachtige recreatie van basis-grid-gap functionaliteit:

Een 3 x 2 raster dat ziet er identiek is aan een CSS grid met een gat instelling

De boven-en linkerkant padding op de grid is eigenlijk optioneel. U kunt ervoor kiezen om te vertrekken uit de bekleding en de verandering van de marge-waarde zoals hieronder wordt weergegeven als u de voorkeur geeft:

.raster {
/* Marge moet dit als het verlaten van de bovenkant en links .raster padding */
margin: 0 -20px 20px 0;
}

Maar, houd op! De baan is nog niet helemaal afgelopen. Neem een kijkje op wat er gebeurt als we een achtergrondkleur toevoegen aan één van de rastercellen:

Een roze achtergrond toegepast op de cel linksboven overloopt in het rooster gat

Niet precies wat we willen, er is dus nog een stap.

Stap 7: background-clip

Om te voorkomen dat de cel achtergrond van bloedend in onze nep-grid-gap, moeten we background-clip: padding-box.

.grid-cel {
/* Voorkomt achtergrond aflopend */
background-clip: padding-box;
}

We hebben nu dit:

De achtergrond bloeden is opgelost!

Als je nog nooit gehoord hebt van de achtergrond-clip goederen voor u mogelijk bezorgd over de steun van de browser… ook niet worden. background-clip heeft al sinds IE9!

Deze browser ondersteunt data is van Caniuse, die heeft meer detail. Een aantal geeft aan dat browser ondersteunt de functie aan die versie.

Desktop

ChromeOperaFirefoxIEEdgeSafari
15 10.5 4 9 12 7

Mobiele / Tablet

iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox
7.0-7.1 10 alle 4.4 67 60

Stap 8: Media Query ‘ S!

De meeste van de tijd, rasters nodig hebt om te kunnen veranderen, het aantal kolommen dat ze hebben als ze groeien en krimpen. Het gebruik van andere methoden kan een enorme pijn. Je zou kunnen hebben voor het berekenen van een bos van ne-childs zo kunt u de juiste marge of wat dan ook. Met deze methode, kunt u slechts één waarde! 😃

.grid-cel {
/* Hiermee stelt u de standaard kolommen */
breedte: calc(100% / 1); /* 1 column */
}

@media (min-width: 400px){
.grid-cel {
breedte: calc(100% / 2); /* 2 kolommen */
}
}

@media (min-width: 600px){
.grid-cel {
breedte: calc(100% / 3); /* 3 kolommen */
}
}

3 x 2 raster met hiaten
2 x 3 raster met hiaten
1 x 6 rooster met gaten

Hier is hoe het eruit ziet als we het allemaal samen:

Zie de Pen Nep-raster door Daniel Tonon (@daniel-tonon) op CodePen.

Ain ‘ t nobody got time voor dat!

Dat is veel werk in vergelijking met wat de moderne Raster kan doen in slechts drie regels van CSS! Om de taak gemakkelijker te maken, heb ik een SCSS-aangedreven mixin ik noem Goot Rooster. Zodra Goot Rooster is geïnstalleerd in het project, kunt u snel creëren van een drie-raster met 20px gaten met behulp van de volgende SCSS code:

.grid-wrapper {
overflow: hidden; /* deze Nodig heeft voor de chrome-bug */
}

.raster {
@behoren raster($cols: 3, $goot: 20px);
}

U kunt schrijven het zelfs nog korter als dat voelt te uitgebreid:

.grid-wrapper {
overflow: hidden;
}

.raster {
@behoren raster(3, 20px);
}

Goot Rooster wordt standaard gebouwd met een paar sets van de breekpunten dus je kan niet schrijven geen breekpunten als een raster over de hele pagina! Als je het nodig hebt aangepaste breekpunten, wel, dan Goot Raster kunt u gemakkelijk aanpassen als volgt:

// Verbose aangepaste onderbrekingspunten
@behoren raster($cols: 7, $goot: 20px, $breekpunten: (
4 : 960px, // Op 960px of hieronder, zullen er 4 kolommen
2 : (max, 600px), // U kunt gebruik maken van mq-scss syntaxis hier
1 : 480px,
));

// Korte versie
@behoren raster(7, 20px, (
4 : 960px,
2 : 600px,
1 : 480px,
));

Zoals je misschien hebt opgemerkt in het voorbeeld, Goot Rooster ondersteunt ook de media query-syntaxis gebruiken dat dit ding heet mq-scss gebruikt. Als u zich afvraagt wat dat is, nou ja, het is een Sass mixin die ik heb gemaakt, dat maakt het schrijven en beheren van media queries ongeveer een miljoen keer makkelijker. Met behulp van mq-scss verklaringen te dicteren kolom aantal staat voor fijne controle over wanneer de kolom aantal wijzigingen.

Schaduw toevoegen aan het raster cellen

Sinds we werken met schaduwen nu, ik neem de box shadow uit van de voorbeeld afbeelding. Onze starting grid ziet er nu als volgt uit:

Een eenvoudige 3 x 2 raster met gaten en een groene rand rond de buitenkant

Als we proberen om een buitenste vak-schaduw aan elke rastercel nu goed… het ziet er niet zo goed:

Schaduw toevoegen aan het raster cellen zorgt ervoor dat de schaduwen om de uitlijning

Laten we die vast.

Stap 1: Nieuwe HTML

Om het creëren van mooie schaduwen, moeten we een extra div in elke cel. Je kunt niet echt gebruik ::vóór of: na de voor deze, omdat ze niet in staat zijn te bevatten HTML-inhoud binnenkant van hen.

<div class=”grid-wrapper”>
<div class=”grid”>

<div class=”grid-cel”>
<div class=”grid-cel-inner”></div>
</div>

<div class=”grid-cel”>
<div class=”grid-cel-inner”></div>
</div>

<div class=”grid-cel”>
<div class=”grid-cel-inner”></div>
</div>

<div class=”grid-cel”>
<div class=”grid-cel-inner”></div>
</div>

<div class=”grid-cel”>
<div class=”grid-cel-inner”></div>
</div>

<div class=”grid-cel”>
<div class=”grid-cel-inner”></div>
</div>

</div>
</div>
Stap 2: Buig het

Nu moeten we ervoor zorgen dat elke rastercel een flex-container. Hierdoor kan de binnenkant van de cel op te nemen over de volledige hoogte van de bovenliggende site. We zullen ook nodig zijn om het innerlijke element een breedte van 100%. Dit zorgt ervoor dat het zal duren voordat de volle omvang van zijn ouder, zowel horizontaal als verticaal:

.grid-cel {
/* Innerlijke krachten op te nemen volledig raster hoogte van een cel */
display: flex;
}

.grid-cel-innerlijke {
/* Innerlijke krachten op te nemen volledig grid cel breedte */
breedte: 100%;
}

Laten we eens kijken wat we krijgen als we proberen het toevoegen van box schaduwen aan de innerlijke elementen:

.grid-cel-innerlijke {
box-shadow: 0 0 10px 3px blauw;
}

Box schaduwen verschijnen rond grid cellen, maar zijn afgesneden,

Dat is veel mooier, maar het is er nog niet. De verborgen overloop die wij gebruiken om te voorkomen dat de Chrome-bug is in de weg zitten.

Stap 3: Hacky padding

Dus, we moeten de overloop, maar nog steeds voorkomen dat deze Chrome-bug. De enige andere veilige manier die ik heb gevonden om dat te doen is met padding. Door het toevoegen van 1px van polstering aan de bovenkant en onderkant van de buitenste raster wrapper element, het zal vast de Chrome-bug.

.grid-wrapper {
/* Voorkomt oneven marge gedrag in Chroom */
padding: 1px 0;
}

Dit gaat ten koste van het hebben van een extra 1px van de ruimte aan de boven-en onderkant van het raster. De afbeelding hieronder laat zien hoe dit eindigt het zoeken. De schaduwen zijn verlicht om de 1px kloof meer duidelijk.

1px van polstering aan de bovenkant en onderkant van het raster

Opmerking: U kunt voorkomen dat de 1px van top padding door te kiezen niet om de top padding kloof waarde op de grid element. De 1px van de bodem-ruimte kan niet worden vermeden dat wel.

Een breedte van de rand op de buitenkant van de grid wrapper ook werken, dus technisch heb ik niet nodig om de padding in het voorbeeld hierboven. De meeste van de tijd, als we de toepassing van een schaduw grid cellen, dan zijn we waarschijnlijk niet willen zien van een rand er omheen. Het bovenstaande voorbeeld was meer aan te tonen hoe kleine de padding is.

Dit is hoe het rooster eruit ziet zonder dat de buitenste rand:

3 x 2 raster schaduw
2 x 3 raster schaduw
1 x 6 raster schaduw

Hier is een Pen waaruit het uiteindelijke product:

Zie de Pen Nep-rooster met schaduwen door Daniel Tonon (@daniel-tonon) op CodePen.

Goot Rooster schaduw

Laat het deksel van het toevoegen van schaduwen op Goot Grid cellen. U kunt gebruik maken van dezelfde HTML-structuur gebruiken we in het vorige voorbeeld.

Nu, het toepassen van deze SCSS te maken van een drie-koloms grid die een 20px goot:

.raster {
@behoren raster(3, 20 px, $binnententen: true);
}

Deze nieuwe $binnententen: true eigendom vertelt Goot Raster om het raster cellen hebben elk één kind-element dat moet de volledige hoogte en breedte van de moedermaatschappij van de rastercel.

In plaats van het gebruik van overflow: hidden, gebruik 1px van onder opvullen op de wrapper element.

.grid-wrapper {
padding-bottom: 1px;
}

Goot Rooster zal niet op de productie van een top buitenste goot als het niet nodig is. Dit helpt bij het voorkomen van problemen rond de Chrome negatieve marge bug. Immers, als er geen top buitenste goot te ontkennen dat met een defecte negatieve marge, dan is er geen bug zorgen over te maken. De onderste buitenste goot is nog steeds een probleem, maar, en dat is waarom we moeten de 1px van onder opvullen. Dit 1px van onder opvullen heeft de neiging om nauwelijks merkbaar (of helemaal niet), dus maak je geen zorgen over te veel.

Voeg nu uw schaduwen en je hebt jezelf een Goot Rooster met schaduw cellen!

.grid-cel-innerlijke {
box-shadow: 0 0 10px 3px blauw;
}

3 x 2 raster schaduw

Ik heb alleen schraapte het oppervlak van wat Goot Rooster kan doen in dit artikel. Lees het volledige documentatie om te leren hoe het anders kan.

We komen aan het einde van onze IE raster avontuur

Ik hoop dat jullie hebben genoten van dit uitstapje in de wereld van de IE en CSS grid. Zorg ervoor dat het lezen door middel van deel 1 en Deel 2 als je nog niet hebt. Na het lezen van alle drie de artikelen, die u zal nu volledig ingericht voor het maken van een aantal prachtige lay-outs die er net zo goed in IE als in moderne browsers.

Als je ooit iemand klagen over het niet kunnen gebruiken van CSS grid vanwege dat wil zeggen, u weet wat te doen. Speels een klap op het hoofd voor zo dwaas en stuur hen hier te krijgen van de waarheid.

Nu ga heen, mijn vrienden, en het bouwen van sommige rasters! 😃🎉

Serie Artikelen:

  1. Debunking Common IE Raster Misvattingen
  2. CSS Grid en de nieuwe Autoprefixer
  3. Het vervalsen van een auto-plaatsing rooster met gaten (Deze Post)