Kilka właściwości CSS, których nie znałem

Od dawna myślę o zaczęciu publikowania treści w internecie. Założenie od początku brzmiało: ucz się — opisuj — utrwalaj. Z okazji rozpoczęcia zabawy z aplikacją Enki postanowiłem działać. Pierwszą mini-grą odblokowaną w Enki był CSS-owy tetris.

Gierka jest całkiem prosta. Jako klocki spadają właściwości CSS, a ja muszę stwierdzić czy taka istnieje czy nie. Oto kilka ciekawych napotkanych przy pierwszej grze, o których istnieniu nie wiedziałem:

  • orphans — akurat redagowałem niedawno pracę inżynierską i w głowie został mi jeszcze termin “sieroty” w tekście. Aby unikać małych fragmentów przy przejściach do następnej strony możemy ustawić orphans: 4 i minimum 4 linie przed przełamaniem strony muszą być. Dotyczy się to jednak paged media, więc ta właściwość nie jest przydatna przy stronach www.
  • unicode-bidi — ta zaskoczyła mnie chyba najbardziej, bo nazwa wygląda na trochę zmyśloną. Unicode-bidi jest używane w parze z direction i można ją wykorzystać do wyświetlenia tekstu od prawej do lewej. Zachęcam do zabawy.
  • caption-side — pozwala na umiejscowienie podpisu tabeli nad lub pod nią. Prosty i wyczerpujący przykład tutaj.
  • counter-increment — właściwość pozwalająca na numerowanie kolejnych sekcji. Przydatna z połączeniu z counter-reset, oraz content i pseudoklasami :after:before. Przykład użycia znajduje się tutaj. Omówię to szerzej niżej.
  • visibility — to mnie zdziwiło bo jest przecież display: none. A jednak visibility istnieje i nie jest tylko aliasem. Różnica polega na tym, że display:none traktuje element jakby go nie było (i przesuwa inne elementy), a visibility:hidden po prostu traktuje element tak jakby tam był tylko po prostu go nie widać. Dokładniej można doczytać np. na StackOverflow
  • clip — może nawet obiło się o uszy, lecz nie używałem w praktyce przez co popełniłem błąd (uznałem, że to fake). Clip oczywiście przycina element do podanego prostokąta np. clip: rect(0px, 0px, 200px, 0px). Sprawdź sam
  • background-blend-mode — tego nie spotkałem w Enki, a podczas researchu nieznanych properties. Pozwala mieszać obrazek i kolor tła w różnych trybach. Podobną funkcjonalność możemy znaleźć w programach graficznych. Popróbuj tutaj.
  • border-image-source — twórz totalnie customowe obramowania dla elementów na podstawie pliku graficznego. Załączam oczywiście try it z W3Schools i proponuję pobawić się tam inną nieznaną mi właściwością: border-image-slice. Efekty bardzo ciekawe ;)
Like what you read? Give Artur Piersa a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.