Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Zmienne (w) CSS
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
Tomplus
6.08.2008, 16:16:15
Witam,
Myślę, że uda się mi się tutaj znaleźć pomoc i może ktoś inny również z korzysta z tego :)

Ostatnio zacząłem korzystać z nie których rzadkich attrybutów styli CSS np. content podczas
Zrobiłem sobie taką stronę testową: http://www.swos.pl/temp/css/testcss.html
a poniżej kod całej strony [skrócony o przykładowe texty i tagi]:


[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <title>Test CSS</title>
  4. <style type="text/css">
  5. body {
  6.      background: url(t.gif);
  7. }
  8. .note, .note-title, .note-news { 
  9.      background: transparent; 
  10.      border: 1px solid #DDD; 
  11.      color: #999; 
  12.      font-size: .9em; 
  13.      padding: 2px 4px 2px 34px; 
  14. }
  15. .note { 
  16.      background: url(' ' attr(src) ' ') no-repeat 8px 50%;
  17. }
  18. .note-title { 
  19.      background: url(k.png) no-repeat 8px 50%;
  20.      color: #66B; 
  21. }
  22. .note-news { 
  23.     padding: 2px 4px 2px 4px; 
  24. }
  25. .note:before { 
  26.      background: transparent;
  27.      color: #9995DD;  
  28.      content: ' ' attr(title) ' ';
  29.      color: ' ' attr(color) ' ';  
  30.      background-image: url(' ' attr(src) ' ');
  31.      border-color: ' ' attr(color) ' ';
  32.      font-weight: bold; 
  33. }
  34.  
  35. p.note-news:before { 
  36.      background: transparent; 
  37.      color: #a96; 
  38.      content: 'NEWS: ';
  39.      font-weight: bold; 
  40. }
  41. p.note-title:before { 
  42.      background: transparent; 
  43.      color: #369; 
  44.      content: 'Tytuł: ';
  45.      font-weight: bold; 
  46. }
  47. .note:hover, .note-title:hover { 
  48.      border: 1px solid #999500; 
  49.      color: #666; 
  50. }
  51. .note-news:hover { 
  52.      border: 1px solid #666; 
  53.      color: #666; 
  54. }
  55. </style>
  56. </head>
  57. <body>
  58. <p class="note-title">O Łagiszy</p>
  59. <p class="note" title="Łagisza">W 1969 roku w wielu gazetach pisano o Łagiszy.</p>
  60. <p class="note-news">Z dniem pierwszego stycznia 1969 r, utraciłem definitywnie swoje wiejskie pochodzenie. Moja rodzinna wieś Łagisza w powiecie będzińskim.</p>
  61. <p class="note" title="Notka" src="quote.gif">W 1969 roku w wielu gazetach pisano o Łagiszy. </p>
  62.  
  63. </body>
  64. </html>
[HTML] pobierz, plaintext



Prosiłbym o skupienie się nad takimi miejscami jak title w tagach <p>

Dzięki tej własności wyświetla się tytuł odrazu na stronie, jako TEXT któru nie daje się skopiować jak zwykły text czy obrazek. Jest wygodne bo gdy user chce skopiować jakiś text, nie musi zaprzątać sobie głowy nie którymi "śmieciami".

Jednak ja chciałbym tą wygodę sobie rozszerzyć o inne elementy np. grafikę i kolory.
Szczególnie to pierwsze.

Nie chce tworzyć kolejnych wpisów jak przy klasa .note-news i .note-title, ale tak że za każdym razem gdy będzie tego potrzeba będę mógł zmienić grafikę/małą ikonkę przy wpisie.

Dlatego pytam się jak zrobić aby jakaś nowa grafika/kolor mógł się wyświetlić tak jak tytuł fragmentu textu czyli przy pomocy takich atrybutów jak ' ' attr(title) ' ', gdyż zastosowanieczegoś podobnego attr(src) nie działa?
.radex
6.08.2008, 16:53:21
Cytat(Tomplus @ 6.08.2008, 17:16:15 ) *
Dzięki tej własności wyświetla się tytuł odrazu na stronie, jako TEXT któru nie daje się skopiować jak zwykły text czy obrazek. Jest wygodne bo gdy user chce skopiować jakiś text, nie musi zaprzątać sobie głowy nie którymi "śmieciami".

Jednak ja chciałbym tą wygodę sobie rozszerzyć o inne elementy np. grafikę i kolory.
Szczególnie to pierwsze.

Nie chce tworzyć kolejnych wpisów jak przy klasa .note-news i .note-title, ale tak że za każdym razem gdy będzie tego potrzeba będę mógł zmienić grafikę/małą ikonkę przy wpisie.

Dlatego pytam się jak zrobić aby jakaś nowa grafika/kolor mógł się wyświetlić tak jak tytuł fragmentu textu czyli przy pomocy takich atrybutów jak ' ' attr(title) ' ', gdyż zastosowanieczegoś podobnego attr(src) nie działa?


Grafika, tzn? obrazek, czy ścieżka? Nie jestem pewien (rzadko korzystam z właściwość content), ale content chyba nie pozwala na HTML-a. Kolor, co masz na myśli? Coś w stylu #ffffff? Jeśli tak, to raczej Ci się to nie uda za pomocą CSS-a, bo attr jest od HTML-owskich atrybutów, a nie znam żadnego odpowiednika przeznaczonego do właciwości CSS.

Natomiast jesteś w błędzie jeśli chodzi o fragment "Dzięki tej własności wyświetla się tytuł odrazu na stronie, jako TEXT któru nie daje się skopiować jak zwykły text czy obrazek. Jest wygodne bo gdy user chce skopiować jakiś text, nie musi zaprzątać sobie głowy nie którymi "śmieciami"." - to, że Firefox nie uznaje tego jako tekst możliwy do skopiowania, nie oznacza, że z innymi przeglądarkami jest tak samo. Tak na prawdę większość osób uważa to za bug firefoksa.
Tomplus
6.08.2008, 23:39:31
Jeżeli jest to bug Firefoxa, to również Opery, bo działa tak samo.

Co do słów umieścić grafikę - Tak, chcę w HTML wpisać w tagu np. <p src="sciezka"> i działało jak obrazek który dałbym odrazu w stylach CSS.
Podobnie z kolorami czy to rgb, hex czy zwykle text.

Standardowo można byłoby zrobić to w dwóch sposobach:
- dodając n-ty razy style CSS o innych nazwach i podopbnych właściwościach - nawet zapętlając przy pomocy PHP
- dodać <img/> i nadać grafice odpowiednie właściwości w stylach.

jednakże nie o to chodzi, wlaśnie chce wykorzystać tą ciekawą właściwość która z attrybutów osadzonych w HTML, przenosi je do CSS. Tak jak to się dzieje z "title"
.radex
7.08.2008, 21:22:26
Cytat(Tomplus @ 7.08.2008, 00:39:31 ) *
Jeżeli jest to bug Firefoxa, to również Opery, bo działa tak samo.

Co do słów umieścić grafikę - Tak, chcę w HTML wpisać w tagu np. <p src="sciezka"> i działało jak obrazek który dałbym odrazu w stylach CSS.
Podobnie z kolorami czy to rgb, hex czy zwykle text.

Standardowo można byłoby zrobić to w dwóch sposobach:
- dodając n-ty razy style CSS o innych nazwach i podopbnych właściwościach - nawet zapętlając przy pomocy PHP
- dodać <img/> i nadać grafice odpowiednie właściwości w stylach.

jednakże nie o to chodzi, wlaśnie chce wykorzystać tą ciekawą właściwość która z attrybutów osadzonych w HTML, przenosi je do CSS. Tak jak to się dzieje z "title"


Mylisz się. W Operze można ten tekst skopiować bez problemów (chyba, że masz jakąś historyczną wersję).

Ostrzegam przed zbyt dużym wykorzystywaniem tych bajerów CSS. Jeśli content będzie wyświetlało tekst istotny dla zrozumienia całego sensu to będzie to niesemantyczne. Oczywiście teksty typu "Treść:" przed treścią, "Data:" przed datą, urozmaicenia nagłówków typu "..::sam nagłówek::.." są jak najbardziej ok i prawdopodobnie właśnie do takich rzeczy zostało to stworzone.
Tomplus
8.08.2008, 10:05:50
Opera 9.5 historyczna ? mniejsza.


Jednakze właśnie do takich rzeczy potrzebuje. Wykorzystanie textu do własnie takich rzeczy, które są informacyjne a zarazem nie potrzebne w toku przetwarzania całego tekstu.
Taki sam skutek chciałem osiągnąć aby móc dodać grafike.

content umożliwia dodawanie grafiki

[HTML] pobierz, plaintext 
  1. p:before {
  2. content url("grafika.png");
  3. }
[HTML] pobierz, plaintext

ale znów wykorzystując attr(title) czy attr(src) nie dodaje mi żadnej informacji.

Szukając w Google nic nie znalazłem ciekawego na ten problem, tylko tyle co ja wiem i sam wymyśliłem również. Jednak wiem że jest mnóstwo sztuczek które czasami nikt ich nie odkrył.
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.