jPortal.pl, to serwis dla miłośników JavaScript. Znajdziesz tutaj ciekawe porady oraz tutoriale, czyli porady "za rączkę", aby zrobić fajne efekty. Dowiesz się też jak tworzyć dobrej jakości kod.
Skoro J ("dżej" - ten gość po lewej) umie, to Ty też podołasz temu wyzwaniu :).

Ciekawa właściwość color w CSS

Opublikowany: 08.02.2011 15:18:09 | Komentarzy 2

Założę się, że prawie wszyscy, którzy kodują używają właściwości color tylko i wyłącznie do kolorowania tekstu. Co więcej, pewnie nikt nie przeczytał dokumentacji :). To dotyczy też mnie. Jak zauważył Louis Lazaris z Impresive Webs, własność color ma specjalne właściwości.

Na początek kawałek dokumentacji:

This property describes the foreground color of an element's text content. In addition it is used to provide a potential indirect value (currentColor) for any other properties that accept color values. If the currentColor keyword is set on the color property itself, it is treated as color: inherit.

Czyli wychodzi na to, że color ustawia także kolor pierwszoplanowy dla każdego elementu, który przyjmuje kolor jako zmienną. Tak jak to zrobił Louis, tak i ja zrobię i posłużę się przykładem, który w prosty sposób zobrazuje problem.

div {
   color: #f90;
   border: solid 2px;
   width: 90px;
   height: 90px;
}

A tak to wygląda na żywo.

Przyjrzyjcie się dokładnie temu przykładowi. Oprócz div, któremy nadałem kolor (tekstu), owy kolor został pobrany jako domyślny dla kolory obwódki (border), której nie przypisałem żadnego koloru.

Co ciekawe, wewnątrz tego kontenera umieściłem też nieuporządkowaną listę - ul - (pustą, z dwoma wylistowaniami), która też korzysta z wcześniej zdefiniowane koloru. W przypadku listy bierze ona kolor dla bulletów. Pamiętam te czasu, kiedy nie wiedziałem dlaczego kolor "punktu" w liście zmieniał nagle kolor :). Teraz już wszystko jasne.

Tagi: css color inherit css currentColor css ul css ul sztuczki css css color

Komentarze

Gavatar Piotrek Reinmar Koszuliński
15.02.2011, Piotrek Reinmar Koszuliński napisał/-a: Lubię odkrywać takie banały językowe :) Niby każdy tego używa, niby każdy wie co się stanie, ale dopiero po sięgnięciu do specyfikacji ta wiedza się "ugruntawia" :)

Ta kwestia trochę wiąże się też z tym, że zajmuję się frontendem już ponad 7 lat i ostatnią książką z dziedziny HTML+CSS, którą czytałem był Zeldman i to jego pierwsza część. Od tego czasu co prawda kilka książek o podobnej tematyce mi się przytrafiło, ale za każdym razem był to raczej wyższy poziom, więc nic o podstawach.
I niby wiedzę mam bardzo dużą, ale w np. z ostatniego roku pamiętam dwie rzeczy, które można uznać za podstawowe, a które mnie zaskoczyły - propagacja relatywnych wysokości linii (tj. np. line-height: 1.5) oraz niektóre możliwości wykorzystania z-index o których wcześniej nic nie wiedziałem.
Gdybym przeczytał nawet 5 lata temu książkę typu "css - biblia eksperta" najprawdopodobniej wszystkiego tego bym się dowiedział. Ale nawet kilka lat temu 98% informacji z tej książki by mnie zanudziło, więc... pewnie bym jej nie przeczytał :P

Tak czy siak - najprawdopodobniej zmuszę się kiedyś do ugruntowania swojej wiedzy i jakąś biblię przewertuję dokładniej. Obym tylko wybrał dobry tytuł, bo inaczej wyśmieję autora po pierwszych kilku rozdziałach i książka trafi do śmieci :P

Tak się rozpisałem i stwierdzam, że font za mały w tym textarea.
Powodzenia z blogiem - ląduje w RSSach :)

A stolica Polski to oczywiście Wrocław.
Gavatar shpyo
15.02.2011, shpyo napisał/-a: Prawda jest taka, że każdy jest już zaawansowanym koderem, a jak trzeba odpowiedzieć na proste pytanie, tworzy się problem :)

Dodaj komentarz