Coraz częściej okazuje się, że przeciętna strona internetowa waży więcej niż legendarny FPS, co nie do końca jest dobrą wiadomością. Może nie dziwi rosnąca objętość zdjęć i video (skoro teoretycznie rosną prędkości łącza – dane Akamai), ale rosnąca objętość CSS zdecydowanie nie jest zjawiskiem pożądanym. Winy można szukać w wielu miejscach – przeładowywanie CMSów dziwnymi wtyczkami jest z pewnością jednym z powodów, ale brak znajomości nowszych właściwości języka też może mieć tu swój udział.
CSS (3) potrafi czasem zirytować – szczególnie jeśli od kodu wymaga się czytelności, szybkości, zgodności z założeniami wizualnymi, oraz bezbłędnego działania na wszystkich przeglądarkach. Istnieją pewne rozwiązania, które wydają się większości naturalne i oczywiste, ale od zawsze wymagają nadmiernie rozbudowanego, niesemantycznego kodu. Takie „koszmarki” to na przykład:

• centrowanie wertykalne nieznanego bloku w nieznanym kontenerze
• „sticky footer” działający zawsze tak jakby się chciało
• obrazki niewiadomych rozmiarów zachowujące się w określony sposób (nie używając background-image)

Ostatni problem kilka miesięcy temu został wreszcie rozwiązany. Jednak mało kto o tym wie.

Fit-object na ratunek

Aby uzyskać efekt odpowiadający wprowadzonemu kilka lat temu „background-size: cover;” trzeba zazwyczaj użyć jednego dodatkowego elementu oraz trochę nadmiarowego kodu. W poniższym przykładzie dzielę się z wami najlepszym sposobem, jaki udało mi się odkryć:

See the Pen PNdREx by Mackie (@mackie_pl) on CodePen.

Trochę hack, przyjęte wartości nie mają większego sensu (poza tym że są względnie wysokie) i do tego działa tylko w określonych przypadkach. Pozostałe metody, takie jak korzystanie z właściwości tabelek (display: table-cell) czy użycie JS do prostego efektu CSS celowo pomijam. A teraz ten sam efekt, przy użyciu nowej (zgodnie z 2013/2014, 31 Chrome release) właściwości object-fit:

See the Pen BKOrYM by Mackie (@mackie_pl) on CodePen.

Jak widać, jest zdecydowanie krótsze i bardziej logiczne. Ponadto może nie tylko zmniejszać, ale wedle wyboru – zwiększać za małe obrazki. Poza „cover” wspomniana właściwość posiada wartości fill (rozciąganie), contain (które mieści cały obrazek wewnątrz kontenera) czy scale-down (które zgodnie z nazwą dobiera najmniejszą sensowną wartość).
Dlaczego warto o tym wspominać? Pomimo że właściwość była wprowadzona już jakiś czas temu, statystyki wskazują, że pojawia się ona jedynie na 1,5% stron – w porównaniu do chociażby zdecydowanie mniej uniwersalnego „outline-offset” które jest dziesięciokrotnie bardziej popularne. Przeszkadza tu jak zwykle ograniczona kompatybilność ze starszymi przeglądarkami (Android 4.4.0 i wcześniejsze wersje, IE) oraz – a jakże – Edgem (chociaż akurat to ostatnie powinno być kwestią czasu). Na szczęście te luki nieźle wypełnia odpowiedni polyfill – warto więc przyjrzeć się tej technologii, ułatwić sobie życie i uczynić sieć nieco szybszą.