CSS - wstrzykiwanie kodu - Grupy dyskusyjne w eGospodarka.pl

eGospodarka.pl › Grupy › pl.comp.www › CSS - wstrzykiwanie kodu

« poprzedni wątek

następny wątek »

Ilość wypowiedzi w tym wątku: 10

1. Data: 2011-12-28 10:30:27
Temat: CSS - wstrzykiwanie kodu
Od: Marek <p...@s...com>

Witam,

Czy da się w CSS tak zdefiniować wartość atrybutu stylu:

content: "<div>xxx</div>";

aby powyższy string był wstawiany jako kod HTML a nie jako tekst do
przeczytania na stronie WWW łącznie z tagami <div>?

[ pokaż wiadomość z nagłówkami ]

do góry
2. Data: 2011-12-28 10:50:45
Temat: Re: CSS - wstrzykiwanie kodu
Od: Mirosław Zalewski <miniopl@CUT_THIS.gmail.com>

środa, 28 grudnia 2011 11:30 wielka mądrość na czytelników pl.comp.www
spłynęła, gdy tako rzekł(a) Marek:

> Czy da się w CSS tak zdefiniować wartość atrybutu stylu:
>
> content: "<div>xxx</div>";
>
> aby powyższy string był wstawiany jako kod HTML a nie jako tekst do
> przeczytania na stronie WWW łącznie z tagami <div>?

CSS odpowiada za *prezentację* dokumentu, a nie jego *strukturę*. Przy
pomocy CSS nie da się dodawać kodu HTML, i całe szczęście.

Jeżeli chcesz dodać jakiś element, skorzystaj z JS. Albo od razu go miej
w dokumencie, tylko ukryty przez ,,display: none". Potem przy pomocy JS
będziesz go pokazywać (wymaga to mniej kodu niż tworzenie elementu i jego
dodawanie w odpowiednim miejscu).
--
Niżej podpisany, zamieszkały w http://minio.xt.pl ,
Mirosław Zalewski

[ pokaż wiadomość z nagłówkami ]

do góry
3. Data: 2011-12-28 11:42:54
Temat: Re: CSS - wstrzykiwanie kodu
Od: beherit <b...@g...com>

W dniu 2011-12-28 11:50, Mirosław Zalewski pisze:
> środa, 28 grudnia 2011 11:30 wielka mądrość na czytelników pl.comp.www
> spłynęła, gdy tako rzekł(a) Marek:
>
>> Czy da się w CSS tak zdefiniować wartość atrybutu stylu:
>>
>> content: "<div>xxx</div>";
>>
>> aby powyższy string był wstawiany jako kod HTML a nie jako tekst do
>> przeczytania na stronie WWW łącznie z tagami<div>?
>
> CSS odpowiada za *prezentację* dokumentu, a nie jego *strukturę*. Przy
> pomocy CSS nie da się dodawać kodu HTML, i całe szczęście.
>
> Jeżeli chcesz dodać jakiś element, skorzystaj z JS. Albo od razu go miej
> w dokumencie, tylko ukryty przez ,,display: none". Potem przy pomocy JS
> będziesz go pokazywać (wymaga to mniej kodu niż tworzenie elementu i jego
> dodawanie w odpowiednim miejscu).

Pytanie czy potrzebujesz znaczników czy może tylko:
<html>
<head>
<style type="text/css">
h1
{
color:orange;
text-align:center;
}
h1::before { content: 'mozesz wstawic tekst z przodu'; }
h1::after{ content: 'i z tyłu'; }

</style>
</head>

<body>
<h1>example</h1>
</body>
</html>

[ pokaż wiadomość z nagłówkami ]

do góry
4. Data: 2011-12-28 17:38:22
Temat: Re: CSS - wstrzykiwanie kodu
Od: Marek <p...@s...com>

Dnia Wed, 28 Dec 2011 12:42:54 +0100, beherit napisał(a):

> Pytanie czy potrzebujesz znaczników czy może tylko:
> <html>
> <head>
> <style type="text/css">
> h1
> {
> color:orange;
> text-align:center;
> }
> h1::before { content: 'mozesz wstawic tekst z przodu'; }
> h1::after{ content: 'i z tyłu'; }
>
> </style>
> </head>
>
> <body>
> <h1>example</h1>
> </body>
> </html>

Znaczników potrzebuję. Mam pewien box (table-cell), który po najechaniu
myszką ma zyskać strzałkę po prawej stronie na zewnątrz. Więc muszę
umieścić 2 DIVy zagnieżdżone. Pierwszy będzie miał position:relative a
drugi będzie w tle zawierał rysunek strzałki i będzie position:absolute -
poza obrębem komórki.Pomyślałem, że tworzenie wielu pozycji menu z taką
ilością tagów będzie niezbyt elegancje więc chciałem zdać się na CSS. Jeśli
nie da się tak, to trudno - umieszczę mnóstwo tagów w kodzie HTML. :-(

[ pokaż wiadomość z nagłówkami ]

do góry
5. Data: 2011-12-28 17:43:12
Temat: Re: CSS - wstrzykiwanie kodu
Od: Marek <p...@s...com>

Dnia Wed, 28 Dec 2011 11:50:45 +0100, Mirosław Zalewski napisał(a):

> CSS odpowiada za *prezentację* dokumentu, a nie jego *strukturę*. Przy
> pomocy CSS nie da się dodawać kodu HTML, i całe szczęście.

Hmmm... może i tracja. Jednakże są pewne niespójności gdyż tekst dodać
można choć to powinno być w HTMLu zrobione. Podobnie można dodać zewnętrzny
obiekt za pomocą content'u.

> Jeżeli chcesz dodać jakiś element, skorzystaj z JS. Albo od razu go miej
> w dokumencie, tylko ukryty przez ,,display: none". Potem przy pomocy JS
> będziesz go pokazywać (wymaga to mniej kodu niż tworzenie elementu i jego
> dodawanie w odpowiednim miejscu).

Zerknij jeszcze co odpowiedziałem koledze, który komentuje Twoje słowa. Tam
opisałem o co mi chodzi. Owszem, JS mogę zastosować również.

[ pokaż wiadomość z nagłówkami ]

do góry
6. Data: 2011-12-28 19:15:43
Temat: Re: CSS - wstrzykiwanie kodu
Od: Mirosław Zalewski <miniopl@CUT_THIS.gmail.com>

środa, 28 grudnia 2011 18:43 wielka mądrość na czytelników pl.comp.www
spłynęła, gdy tako rzekł(a) Marek:

> Hmmm... może i tracja. Jednakże są pewne niespójności gdyż tekst dodać
> można choć to powinno być w HTMLu zrobione.

Tekst można dodać choćby dlatego, że wg niektórych np. średnik kończący
elementy wyliczenia jest elementem prezentacji, a nie struktury dokumentu,
i dlatego w kodzie HTML nie powinien się znaleźć. A jakoś trzeba go tam
umieścić.

Poza tym content chyba bardziej służy do tworzenia autoinkrementujących się
wyliczeń (np. poprzedzanie nagłówków numerami, tak jak to robią pakiety
biurowe) i tego typu rzeczy.

A że przy okazji można w CSS-ie napisać całą treść strony -- to że coś można
zrobić, nie znaczy że powinniśmy ;) .
--
Niżej podpisany, zamieszkały w http://minio.xt.pl ,
Mirosław Zalewski

[ pokaż wiadomość z nagłówkami ]

do góry
7. Data: 2011-12-28 19:43:54
Temat: Re: CSS - wstrzykiwanie kodu
Od: Mirosław Zalewski <miniopl@CUT_THIS.gmail.com>

środa, 28 grudnia 2011 18:38 wielka mądrość na czytelników pl.comp.www
spłynęła, gdy tako rzekł(a) Marek:

> Znaczników potrzebuję. Mam pewien box (table-cell), który po najechaniu
> myszką ma zyskać strzałkę po prawej stronie na zewnątrz. Więc muszę
> umieścić 2 DIVy zagnieżdżone.

Ale czym różni się div w kodzie HTML od pseudoelementu CSS, któremu możesz
nadać wszelkie możliwe właściwości (włącznie z rozmiarami, pozycjonowaniem
i tłem)?

Czy poniższy przykład nie jest mniej więcej tym, co chcesz osiągnąć?
Oczywiście wymaga on dopracowania, ale chodzi o przedstawienie ogólnej
zasady działania.

<!DOCTYPE html>
<html>
<head>
<meta charset=utf8>
<style>
ul {
background-color: green;
width: 200px;
}
li {
display: table-cell;
background-color: yellow;
width: 200px;
}
li:hover span::after {
content: "->";
font-size: 200%;
background-color: red;
position: relative;
top: 0;
left: 60px;
}
</style>
</head>
<body>
<ul>
<li><span>Jakaś tam treść</span></li>
<li><span>Jakaś tam treść</span></li>
</ul>
</body>
</html>
--
Niżej podpisany, zamieszkały w http://minio.xt.pl ,
Mirosław Zalewski

[ pokaż wiadomość z nagłówkami ]

do góry
8. Data: 2011-12-28 19:53:14
Temat: Re: CSS - wstrzykiwanie kodu
Od: Marek <p...@s...com>

Dnia Wed, 28 Dec 2011 20:15:43 +0100, Mirosław Zalewski napisał(a):

> Tekst można dodać choćby dlatego, że wg niektórych np. średnik kończący
> elementy wyliczenia jest elementem prezentacji, a nie struktury dokumentu,
> i dlatego w kodzie HTML nie powinien się znaleźć. A jakoś trzeba go tam
> umieścić.

Z powodu tego umownego "średnika" W3C uchwaliło conntent? :-D

> Poza tym content chyba bardziej służy do tworzenia autoinkrementujących się
> wyliczeń (np. poprzedzanie nagłówków numerami, tak jak to robią pakiety
> biurowe) i tego typu rzeczy.
>
> A że przy okazji można w CSS-ie napisać całą treść strony -- to że coś można
> zrobić, nie znaczy że powinniśmy ;) .

Tak, słuszna uwaga. Content, tak jak napisałeś, ma póki co służyć do
wspomagania tworzenia list a także np. cytatów itp, gdzie cytowana treść
będzie automatycznie ujetą np. w cudzysłów.

[ pokaż wiadomość z nagłówkami ]

do góry
9. Data: 2011-12-28 20:02:27
Temat: Re: CSS - wstrzykiwanie kodu
Od: Mirosław Zalewski <miniopl@CUT_THIS.gmail.com>

środa, 28 grudnia 2011 20:53 wielka mądrość na czytelników pl.comp.www
spłynęła, gdy tako rzekł(a) Marek:

> Z powodu tego umownego "średnika" W3C uchwaliło conntent? :-D

Nie wiem, nie śledzę dyskusji wewnątrz W3C i innych tego typu instytucji.
Raczej chodziło mi o pokazanie przykładów ,,właściwego" użycia content,
uzasadniających jego wprowadzenie do specyfikacji. Cudzysłowy, o których
wspomniałeś, są bardzo dobrym przykładem takiego tekstu, który w sumie nie
wiadomo czy należy bardziej do treści, czy prezentacji dokumentu.
--
Niżej podpisany, zamieszkały w http://minio.xt.pl ,
Mirosław Zalewski

[ pokaż wiadomość z nagłówkami ]

do góry
10. Data: 2011-12-29 02:00:51
Temat: Re: CSS - wstrzykiwanie kodu
Od: porneL <n...@p...net>

On Wed, 28 Dec 2011 19:53:14 -0000, Marek <p...@s...com> wrote:

>> Tekst można dodać choćby dlatego, że wg niektórych np. średnik kończący
>> elementy wyliczenia jest elementem prezentacji, a nie struktury
>> dokumentu, i dlatego w kodzie HTML nie powinien się znaleźć. A jakoś
>> trzeba go tam
>> umieścić.
>
> Z powodu tego umownego "średnika" W3C uchwaliło conntent? :-D

Jest kilka zastosowań:

hr {content: "???";}
li::marker {content: "-";}

@media print {
a::after {content: "(" attr(href) ")";}
}

I moje ulubione, które mam w arkuszu użytkownika:

input[type=reset] {content:"uwaga, formularz robiony bezmyślnie";}

--
regards, porneL

[ pokaż wiadomość z nagłówkami ]

do góry