Forum PHP.pl > dwa różne atrybuty class dla jednego elementu

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: dwa różne atrybuty class dla jednego elementu

Forum PHP.pl > Forum > Po stronie przeglądarki > CSS

VGT

8.04.2005, 16:03:17

Na temat mojego problemu przejrzałem google i wątki z 3 ostatnich stron w tym dziale, ale jednak nic nie znalazłem, w związku z tym proszę o pomoc, wyjaśnienie mi tej kwestii.

W zamieszonym poniżej przykładzie przygotowałem style do kolorowania elementów, oraz do odpowiedniego wyrównywania na stronie.

Moje pytanie dotyczy tego, czy mogę te style łączyć tak, jak to zrobiłem w nagłówkach.

[HTML] pobierz, plaintext 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css">
.red {color:red;}
.green {color:green;}
.blue {color:blue;}
 
.left {text-align:left;}
.center {text-align:center;}
.right {text-align:right;}
</style>
</head>
<body>
<h3 class="red left">linia 1</h3>
<h3 class="green center">linia 2</h3>
<h3 class="blue right">linia 3</h3>
</body>
</html>
[HTML] pobierz, plaintext

Zarówno IE, FireFox i Opera tak samo interpretują ten kod i niby pozwalają na takie łączenie.

Jednak gdy przerabiam kurs CSS'a na www.w3schools.com - czytam:

Cytat

Note: Only one class attribute can be specified per HTML element! The example below is wrong:

<p class="right" class="center">
This is a paragraph.
</p>

Faktycznie w sposób tam zaprezentowany się nie da, gdyż wtedy drugi atrybut class jest ignorowany.

Ale czy mój sposób jest dobry i zgodny ze standardem?
A jeśli nie to jakie są inne sposoby, oprócz tworzenia styli "każdy z każdym"...

Z góry dzięki za odpowiedź

matid

8.04.2005, 16:20:14

Validator pisze, że jest to ok. Nie wiem jak to działa w starszych przeglądarkach, ale podejrzewam, że mogą być problemy.

A tak wogóle, to moim zdaniem taki sposób korzystania z CSS'a jest niepraktyczny. Powinno się raczej definiować style opisujące konkretny element, a nie jego cechę.
Czyli nie:

[HTML] pobierz, plaintext 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css">
.red {color:red;}
.green {color:green;}
.blue {color:blue;}
 
.left {text-align:left;}
.center {text-align:center;}
.right {text-align:right;}
</style>
</head>
<body>
<h3 class="red left">linia 1</h3>
<h3 class="green center">linia 2</h3>
<h3 class="blue right">linia 3</h3>
</body>
</html>
[HTML] pobierz, plaintext

a raczej:

[HTML] pobierz, plaintext 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css">
 
#linia_1 {color: red; text-align: left}
#linia_2 {color: green; text-align: center}
#linia_3 {color: blue; text-align: right}
 
</style>
</head>
<body>
<h3 id="linia_1">linia 1</h3>
<h3 id="linia_2">linia 2</h3>
<h3 id="linia_3">linia 3</h3>
</body>
</html>
[HTML] pobierz, plaintext

VGT

8.04.2005, 16:35:22

Matid ->
Właśnie validator mi to łykał, 3 przeglądarki także, więc do tej pory spokojnie stosowałem. Dopiero po zapoznaniu się z tym kursem na w3schools.com zostałem troche zbity z tropu.

Oczywiście w tym przykładzie zaprezentowany przez Ciebie sposób jest odpowiedniejszy ale to miał być tylko przykład, więc może sprecyzuję, gdzie tego używam.

Mam style dla komórek tabeli, jak wiadomo, można tam zrobić sporo, więc trochę tego jest szczególnie jak takich różnych wizualnie tabel jest kilkanaście.
Teraz jedyna rzecz, która w tych stylach jest niestała, to wyrównanie tekstu w komórce. Każda z tabel może mieć komórki z wyrównaniem left,center,right.

Były 3 drogi:

- mogłem stworzyć style bez wyrównania, a następnie w komórkach definiować klasę i dodatkowo wyrównanie:

[HTML] pobierz, plaintext 
<td class="klasa" style="text-align:right">tekst</td>
[HTML] pobierz, plaintext

Rozwiązanie akceptowalne o ile nie ma nic lepszego, ten sposób preferuję stosować w ostateczności, jeśli w całym serwisie jedną jedyną rzecz muszę zrobić inaczej.

- mogłem dla każdego stylu komórki stworzyś 3 wersje z róznym wyrównaniem, co jednak zwiększa znacznie css'a i znacznie pogarsza możliwość zmian wyglądu (trzeba pamiętać o zmianie każdego elementu w trzech miejscach) - każdy z dotychczasowych stylów trzeba stworzyć w 3 wersjach

- 3 rozwiązanie właśnie zaprezentowałem a ponieważ działa na wszystkich przeglądarkach (w aktualnych wersjach, jak zauważyłeś - nie wiem, jak jest na wcześniejszych), to rozwiązanie odpowiadało mi znacznie bardziej od pierwszego.
Jednak teraz chciałbym się upewnić, czy mogę tak robić, gdyż jeśli nie, powinienem chyba wrócić do sposobu pierwszego.

***EDIT***
W międzyczasie znalazłem tutaj wątek o łączeniu styli, co pozwoliło mi wpaść na takie rozwiżanie pośrednie:

[HTML] pobierz, plaintext 
<style type="text/css">
.red_left, .red_center, .red_right {color:red;}
 
.red_left {text-align:left;}
.red_center {text-align:center;}
.red_right {text-align:right;}
 
.green_left, .green_center, .green_right {color:green;}
 
.green_left {text-align:left;}
.green_center {text-align:center;}
.green_right {text-align:right;}
 
.blue_left, .blue_center, .blue_right {color:blue;}
 
.blue_left {text-align:left;}
.blue_center {text-align:center;}
.blue_right {text-align:right;}
</style>
 
.....
 
<h3 class="red_left">linia 1</h3>
<h3 class="green_center">linia 2</h3>
<h3 class="blue_right">linia 3</h3>
[HTML] pobierz, plaintext

Jest to rozwiązanie drugie, ale pozbawione wymienionych przeze mnie wad.
Rozwiązanie mnie zadowolające ale moje pytanie o to, czy mogę stosować sposób z pierwszego posta jest nadal aktualne

Strus

8.04.2005, 17:55:12

Cytat(Bonastick @ 2005-04-08 16:35:22)

Matid ->
Właśnie validator mi to łykał, 3 przeglądarki także, więc do tej pory spokojnie stosowałem. Dopiero po zapoznaniu się z tym kursem na w3schools.com zostałem troche zbity z tropu.

To nie wiem co to za walidator, że Ci to łyknął

Nie można dublować własności dla selektorów. Jedyny poprawny zapis to <div class="cos1" id="cos2" />

NIe można użyć ani <div class="cos1" class="cos2" /> ani <div id="cos1" id="cos2" />

http://www.w3.org/TR/CSS1#class-as-selector

VGT

8.04.2005, 18:04:39

Cytat(Strus @ 2005-04-08 16:55:12)

Cytat(Bonastick @ 2005-04-08 16:35:22)

Matid ->
Właśnie validator mi to łykał, 3 przeglądarki także, więc do tej pory spokojnie stosowałem. Dopiero po zapoznaniu się z tym kursem na w3schools.com zostałem troche zbity z tropu.

To nie wiem co to za walidator, że Ci to łyknął

Nie wiem, czy przeczytałeś cały mój pierwszy post. -> spójrz jakie klasy wykorzystałem w tagach <h3>
O tym, że nie można dublować, wiem.
Według tego co ty napisałeś, ja stosuję:

[HTML] pobierz, plaintext 
<div class="cos1 cos2" />
[HTML] pobierz, plaintext

i to według validatora jest poprawne.
Mój sposób jest troche inny i jedyne czego próbuję sie dowiedzieć, to czy ten sposób jest dozwolony.

Strus

8.04.2005, 18:48:08

Teraz zatrybiłem ten Twój sposób, w istocie jest ciekawy, validator to łyka i przeglądarki wyświetlają.

Mojm zdaniem walidator się pomylił i taki zapis jest niepoprawny.
Jest nie poprawny bo w specyfikacji CSS1 jest wyraźnie napisane "Only one class can be specified per selector." W moim rozumieniu to nie tyle tyczy się sposobu zapisu class(przy pomocy tylko jednego class), co samej idei stosowania class(że nie można więcej niż jednej klasy użyć).

VGT

8.04.2005, 19:46:56

Wszystko ładnie i tak samo działa na wszystkich przeglądarkach co nie jest aż tak częstym zjawiskiem

,
ale wyjaśnienie logiczne. Aż szkoda

Więc pozostaje mi przejść na sposób, który zamieściłem w końcówce mojego drugiego postu. To już chyba jest w pełni zgodne ze standardem.

Dzięki za pomoc i poświęcony czas

Strus

8.04.2005, 20:09:54

Pamiętaj, że to jest tylko moja interpretacja specyfikacji CSS1.

Próbuję się właśnie dobić do jednej osoby z W3C, jak tylko się odezwie to się go zapytam czy to jest błąd validatora czy ja to źle rozumiem czy co jest grane.

IMHO validator nie zwraca błędu bo nie przewidzieli takiej możliwości zapisu.

VGT

8.04.2005, 20:20:31

OK, więc jeśli będziesz miał jakieś wieści, zamieść je w tym wątku, będę go śledził.

To, że jest to tylko Twoja intepretacja - rozumiem, po prostu się z nią zgadzam i dlatego akcpetuję to.

Jeszcze zastanawiające może być to, że jeżeli to jest niezgodne, moim zdaniem przeglądarki powinny szukać klasy "cos1 cos2" i jej nie znaleźć, zamiast znajdować dwie klasy "cos1" i "cos2".
Tak więc od strony przeglądarek taka opcja była przewidziana, ale jak wiadomo, to co przeglądarki interpretują to często wolna amerykanka a nie sztywne standardy, więc tym sie nie sugeruję i większą wartość ma dla mnie choćby podany przez Ciebie cytat ze specyfikacji:
"Only one class can be specified per selector."

Strus

8.04.2005, 21:15:51

Cytat(Bonastick @ 2005-04-08 20:20:31)

Jeszcze zastanawiające może być to, że jeżeli to jest niezgodne, moim zdaniem przeglądarki powinny szukać klasy "cos1 cos2" i jej nie znaleźć, zamiast znajdować dwie klasy "cos1" i "cos2".

Nie, ponieważ nazwa klasy czy też ID nie może zawierać spacji.

Co do tematu to jednak validator się nie pomylił. Poprostu ja cytowałem to z obecnej rekomendacji czyli CSS1, a większość przeglądarek w swoich parserach ma zaimplementowane własności z CSS2.1

Tu jest opisane dlaczego to co napisałeś jest jednak poprawne - http://www.w3.org/TR/CSS21/selector.html#class-html

Tak dla absolutnej pewności, żeby ktoś źle nie zrozumiał bo już jest nieźle zamotane.

To jest poprawne:

Kod

<h3 class="red left">linia 1</h3>
<h3 class="green center">linia 2</h3>
<h3 class="blue right">linia 3</h3>

Więc sprawa jest definitywnie rozstrzygnięta

VGT

8.04.2005, 22:00:33

Cytat(Strus @ 2005-04-08 20:15:51)

Więc sprawa jest definitywnie rozstrzygnięta

I to na moją korzyść

Dzięki za dogłębne zbadanie tematu, teraz już jestem spokojny

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.