Jön a Bootstrap 5 - De mit lehet tudni róla?
Bár egy kicsit korai a bejelentés, mert a legóvatosabb becslések szerint is 2020 második felében jön ki, de akkor is illik felkészülni néhány változásra. És biztosak lehetünk abban is, hogy az új kiadás változásai még koránt sem véglegesek. Eredetileg nem új verziónak szánták, csak egy pár bugot
Bár egy kicsit korai a bejelentés, mert a legóvatosabb becslések szerint is 2020 második felében jön ki, de akkor is illik felkészülni néhány változásra. És biztosak lehetünk abban is, hogy az új kiadás változásai még koránt sem véglegesek. Eredetileg nem új verziónak szánták, csak egy pár bugot akartak kijavítani, meg néhány CSS szabályt egyszerűsíteni, mégis új kiadás lett belőle.
Az egyik legfontosabb, hogy elengedik az Internet Explorer támogatást. (Igen, a Bootstrap 4 működik IE-10-ben). Ez lehet rossz hír azok számára, akiknek fontos a kompatibilitás, de alighanem többen vannak azok, akik szeretnének végre megszabadulni tőle.
Ugyanakkor ez egy hatalmas nagy előnye volt a Bootstrapnek. Mert ha már nincs képben az IE, akkor miért is ne használjunk CSS Grid-et?
Nem lesz benne JQuery.
Ez a döntés igencsak megosztotta a webfejlesztő társadalmat. Nagyon sokan szeretik a JQuery-t az egyszerűsége miatt, mások szerint pedig már eljárt felette az idő. Egy kommentár a sok közül:
„Úgy gondolom, hogy azokat a problémákat, amiket a JQuery hivatott megoldani, (DOM manipuláció, AJAX, jópofa effektek) már beépítették a Javascriptbe vagy CSS-be, ezért a fejlesztők meggondolják, hogy egy 55K méretű fájlt berakjanak-e a weboldalukba.
Mi lesz akkor helyette? Sima Vanilla JS, de állítólag, ha van JQuery az oldalon, akkor a Bootstrap használni fogja. (?).
Teljes képernyő méretű modal
Ezt már vártam, sokszor nagyon jól jött volna. Ez biztosítja a bootstrap előugró ablakait. Ha az ember egy teljes méretű modal-t akart készíteni, akkor azt csak feleslegesen sok tornamutatvánnyal lehetett kivitelezni.
Íme egy példa az új, teljes méretű modalra:
Rszponzív font méret
Ez nem újdonság, ilyen eddig is volt. Csak mostantól ez az alapbeállítás.
Ami megszűnik: .font-size-sm, .font-size-base, .font-size-lg .font-size-xl
Lesz helyette: .text-sm, .text-base, .text-lg .text-xl .
Példa hardcore felhasználóknak, a betűméretet így számítjuk:
.title {
font-size: calc(1.525rem + 3.3vw);
}
Reszponzív konténerek
Eddig két lehetőségünk volt: container és container-fluid. A Bootstrap 5 kiegészül, container-sm, container-md stb. classokkal.
A térközök számítása is változik egy kicsit, ami eddig alapértelmezés szerint 30px volt, az ezután 2rem méretű lesz.
A Col-* elemek belső margójára (padding) vonatkozó szabályt is ésszerűsítették. Erdetileg 60 (!) class volt benne, col-1-től col-xl-auto-ig, de ez egyszerűsíthető volt egy .row > * CSS szelektorral.
Card-deckek megszűnnek. ugyanis a sokkal jobban lehet egy sort elrendezni a grid elemeivel.
Navbar javítások
- Felesleges display: inline-block tulajdonság eltávolítása a gyermekobjetumokról
- line-height: inherit; érték eltávolítása. (felesleges, mert ez az alapérték)
- „Flex” rövidítés használata
- „Background” rövidítés továbbfejlesztése
Ahogy átolvasom a listát (a teljesség igénye nélkül), nem nagyon értem, hogy mitől lett ebből új verzió. Várjunk még egy kicsit, hátha meglepnek minket valami forradalmian új feature-el . Én 2020-ban, a 4K monitorok idején vártam volna egy XL-nél nagyobb breakpoint-ot, mondjuk UL (ultralarge) néven. Persze aki ért az SCSS-hez, az megírhatja magának. De aki ennyire haladó, az írjon saját CSS framework-öt.
Megéri-e áttérni? BS4-ről nem. BS3-ról mindenképp.
Aki csak tiszta forrásból dolgozik, itt nyomon követheti a változásokat:
