Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> dwa różne atrybuty class dla jednego elementu
VGT
post
Post #1





Grupa: Zarejestrowani
Postów: 63
Pomógł: 9
Dołączył: 19.11.2004
Skąd: Iława

Ostrzeżenie: (0%)
-----

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 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html>
  3. <head>
  4. <title>Test</title>
  5. <style type="text/css">
  6. .red {color:red;}
  7. .green {color:green;}
  8. .blue {color:blue;}
  9.  
  10. .left {text-align:left;}
  11. .center {text-align:center;}
  12. .right {text-align:right;}
  13. </style>
  14. </head>
  15. <body>
  16. <h3 class="red left">linia 1</h3>
  17. <h3 class="green center">linia 2</h3>
  18. <h3 class="blue right">linia 3</h3>
  19. </body>
  20. </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ź
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 10)
matid
post
Post #2





Grupa: Zarejestrowani
Postów: 362
Pomógł: 0
Dołączył: 18.02.2004
Skąd: Knurów

Ostrzeżenie: (0%)
-----

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 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html>
  3. <head>
  4. <title>Test</title>
  5. <style type="text/css">
  6. .red {color:red;}
  7. .green {color:green;}
  8. .blue {color:blue;}
  9.  
  10. .left {text-align:left;}
  11. .center {text-align:center;}
  12. .right {text-align:right;}
  13. </style>
  14. </head>
  15. <body>
  16. <h3 class="red left">linia 1</h3>
  17. <h3 class="green center">linia 2</h3>
  18. <h3 class="blue right">linia 3</h3>
  19. </body>
  20. </html>
[HTML] pobierz, plaintext

a raczej:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html>
  3. <head>
  4. <title>Test</title>
  5. <style type="text/css">
  6.  
  7. #linia_1 {color: red; text-align: left}
  8. #linia_2 {color: green; text-align: center}
  9. #linia_3 {color: blue; text-align: right}
  10.  
  11. </style>
  12. </head>
  13. <body>
  14. <h3 id="linia_1">linia 1</h3>
  15. <h3 id="linia_2">linia 2</h3>
  16. <h3 id="linia_3">linia 3</h3>
  17. </body>
  18. </html>
[HTML] pobierz, plaintext


Ten post edytował matid 8.04.2005, 16:21:13
Go to the top of the page
+Quote Post
VGT
post
Post #3





Grupa: Zarejestrowani
Postów: 63
Pomógł: 9
Dołączył: 19.11.2004
Skąd: Iława

Ostrzeżenie: (0%)
-----

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 
  1. <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 
  1. <style type="text/css">
  2. .red_left, .red_center, .red_right {color:red;}
  3.  
  4. .red_left {text-align:left;}
  5. .red_center {text-align:center;}
  6. .red_right {text-align:right;}
  7.  
  8. .green_left, .green_center, .green_right {color:green;}
  9.  
  10. .green_left {text-align:left;}
  11. .green_center {text-align:center;}
  12. .green_right {text-align:right;}
  13.  
  14. .blue_left, .blue_center, .blue_right {color:blue;}
  15.  
  16. .blue_left {text-align:left;}
  17. .blue_center {text-align:center;}
  18. .blue_right {text-align:right;}
  19. </style>
  20.  
  21. .....
  22.  
  23. <h3 class="red_left">linia 1</h3>
  24. <h3 class="green_center">linia 2</h3>
  25. <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 (IMG:http://forum.php.pl/style_emoticons/default/sadsmiley02.gif)

Ten post edytował Bonastick 8.04.2005, 17:01:43
Go to the top of the page
+Quote Post
Strus
post
Post #4





Grupa: Zarejestrowani
Postów: 184
Pomógł: 0
Dołączył: 19.01.2005
Skąd: Bochnia

Ostrzeżenie: (0%)
-----

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ął (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

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
Go to the top of the page
+Quote Post
VGT
post
Post #5





Grupa: Zarejestrowani
Postów: 63
Pomógł: 9
Dołączył: 19.11.2004
Skąd: Iława

Ostrzeżenie: (0%)
-----

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ął (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

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

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 
  1. <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.

Ten post edytował Bonastick 8.04.2005, 18:08:49
Go to the top of the page
+Quote Post
Strus
post
Post #6





Grupa: Zarejestrowani
Postów: 184
Pomógł: 0
Dołączył: 19.01.2005
Skąd: Bochnia

Ostrzeżenie: (0%)
-----

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ć).
Go to the top of the page
+Quote Post
VGT
post
Post #7





Grupa: Zarejestrowani
Postów: 63
Pomógł: 9
Dołączył: 19.11.2004
Skąd: Iława

Ostrzeżenie: (0%)
-----

Wszystko ładnie i tak samo działa na wszystkich przeglądarkach co nie jest aż tak częstym zjawiskiem (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg) ,
ale wyjaśnienie logiczne. Aż szkoda (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg)

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 (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)
Go to the top of the page
+Quote Post
Strus
post
Post #8





Grupa: Zarejestrowani
Postów: 184
Pomógł: 0
Dołączył: 19.01.2005
Skąd: Bochnia

Ostrzeżenie: (0%)
-----

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.
Go to the top of the page
+Quote Post
VGT
post
Post #9





Grupa: Zarejestrowani
Postów: 63
Pomógł: 9
Dołączył: 19.11.2004
Skąd: Iława

Ostrzeżenie: (0%)
-----

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."

Ten post edytował Bonastick 8.04.2005, 20:23:25
Go to the top of the page
+Quote Post
Strus
post
Post #10





Grupa: Zarejestrowani
Postów: 184
Pomógł: 0
Dołączył: 19.01.2005
Skąd: Bochnia

Ostrzeżenie: (0%)
-----

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 (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)
Go to the top of the page
+Quote Post
VGT
post
Post #11





Grupa: Zarejestrowani
Postów: 63
Pomógł: 9
Dołączył: 19.11.2004
Skąd: Iława

Ostrzeżenie: (0%)
-----

Cytat(Strus @ 2005-04-08 20:15:51)
Więc sprawa jest definitywnie rozstrzygnięta (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

I to na moją korzyść (IMG:http://forum.php.pl/style_emoticons/default/biggrin.gif)

Dzięki za dogłębne zbadanie tematu, teraz już jestem spokojny (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)
Go to the top of the page
+Quote Post
« Następny starszy · CSS · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 24.08.2025 - 00:23
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn