list-style-image abhängig von Link?!?

[Damian]

Hallo zusammen,

ich würde gerne innerhalb meiner Listen je nach verlinktem Dateityp (also z.B. pdf, txt, ...) ein anderes Symbol voranstellen. Leider konnte ich bislang nichts dazu finden.

Ist dies denn per CSS möglich?
Oder was gibt es hierfür sonst für Möglichkeiten?!?

Viele Grüße
Damian

[Cheatah]

Hi,

ich würde gerne innerhalb meiner Listen je nach verlinktem Dateityp (also z.B. pdf, txt, ...) ein anderes Symbol voranstellen. Leider konnte ich bislang nichts dazu finden.

Ist dies denn per CSS möglich?

es ist - leider selbst mit CSS/3.0 - _nicht_ möglich, ein Element anhand seiner inhaltlichen Struktur zu selektieren. Lediglich mit :contains() hat CSS/3.0 einen Ansatz dafür geschaffen, der in Deinem Fall aber keinen Nutzen birgt.

Oder was gibt es hierfür sonst für Möglichkeiten?!?

Niemand zwingt Dich, das Symbol per list-style-image zu verteilen, oder dies dem <li> zuzuordnen. An beiden Stellen kannst Du einhaken.

Cheatah

[MudGuard]

Hi,

es ist - leider selbst mit CSS/3.0 - _nicht_ möglich, ein Element anhand seiner inhaltlichen Struktur zu selektieren. Lediglich mit :contains() hat CSS/3.0 einen Ansatz dafür geschaffen, der in

der aktuellen Version wieder entfernt wurde.

cu,
Andreas

[Cheatah]

Hi,

Lediglich mit :contains() hat CSS/3.0 einen Ansatz dafür geschaffen, der in
der aktuellen Version wieder entfernt wurde.

hoppla, danke. Ich muss meine Sidebar regelmäßiger aktualisieren, merke ich.

Cheatah

[at]

Hallo.

es ist - leider selbst mit CSS/3.0 - _nicht_ möglich, ein Element anhand seiner inhaltlichen Struktur zu selektieren. Lediglich mit :contains() hat CSS/3.0 einen Ansatz dafür geschaffen, der in Deinem Fall aber keinen Nutzen birgt.

Aber etwa zeitgleich mit der nächsten CSS-Generation wird ja auch eine neue Version von XHTML aktuell werden, die zumindest in diesem konkreten Anwendungsfall keine derartige Verschachtelung mehr erfordert.
MfG, at

[Gunnar Bittersmann]

Hello out there!

ich würde gerne innerhalb meiner Listen je nach verlinktem Dateityp (also z.B. pdf, txt, ...) ein anderes Symbol voranstellen.

Das kann gar nicht gehen, weil du nicht _Dateien_ verlinkst, sondern _Ressourcen_. Ein Client kann gar nicht wissen, welcher MIME-Typ/welche MIME-Typen(!) hinter einem URI steckt/stecken, bevor er diesen nicht per HTTP angefordert hat. Ts, dass Cheatah das übersehen hat. ;-)

Du kannst den/die Typen aber explizit angeben:

<ul>  
  <li><a href="foo" type="application/pdf">foo</a></li>  
  <li><a href="bar" type="text/plain">bar</a></li>  
</ul>

Für veraltete Browser, die den http://de.selfhtml.org/css/formate/zentrale.htm#attributbedingte@title=Attributselektor nicht kennen, könntest du auch Klassen vergeben.

See ya up the road,
Gunnar

[Damian]

Das kann gar nicht gehen, weil du nicht _Dateien_ verlinkst, sondern _Ressourcen_. Ein Client kann gar nicht wissen, welcher MIME-Typ/welche MIME-Typen(!) hinter einem URI steckt/stecken, bevor er diesen nicht per HTTP angefordert hat. Ts, dass Cheatah das übersehen hat. ;-)

OK, unsaubere Ausdrucksweise.
Die Idee war, dass der Typ anhand der Endung erkannt wird, eine Textdatei also z.B. so:
<a href="*.txt">

Du kannst den/die Typen aber explizit angeben:

<ul>

<li><a href="foo" type="application/pdf">foo</a></li>
  <li><a href="bar" type="text/plain">bar</a></li>
</ul>

>   
> Für veraltete Browser, die den <http://de.selfhtml.org/css/formate/zentrale.htm#attributbedingte@title=Attributselektor> nicht kennen, könntest du auch Klassen vergeben.  
>   
  
Und wie könnte ich dann weitermachen?!?  
Hab gerade ein bisschen rumgesucht, aber leider noch keine zündende Idee gehabt...  
  
  
Danke soweit und weiter so! ;-)  
  
Damian

[Gunnar Bittersmann]

Hello out there!

Die Idee war, dass der Typ anhand der Endung erkannt wird, eine Textdatei also z.B. so:
<a href="*.txt">

Ziemlich unsichere Erkennung; du kannst nie sicher sein, ob da wo ".txt" draufsteht auch "text/plain" drin ist.

Naja, wenn du das nur für deine Website(s) anwendest, könntest du das so machen.

Selektion anhand der „Endung“ wird erst mit CSS 3 möglich sein.

Für veraltete Browser, die den http://de.selfhtml.org/css/formate/zentrale.htm#attributbedingte@title=Attributselektor nicht kennen, könntest du auch Klassen vergeben.
Und wie könnte ich dann weitermachen?!?
Hab gerade ein bisschen rumgesucht, aber leider noch keine zündende Idee gehabt...

Ich verstehe nicht, was du an der verlinkten Stele in SELFHTML nicht verstehst.

See ya up the road,
Gunnar

[Damian]

Naja, wenn du das nur für deine Website(s) anwendest, könntest du das so machen.

Ist "nur" innerhalb des Intranets gedacht und müsste daher schon stimmen. Aber wie könnte das dann aussehen? Komme da momentan leider nicht voran...

Selektion anhand der „Endung“ wird erst mit CSS 3 möglich sein.

So dass ich zumindest bis dahin noch eine andere Lösung brauche... ;-)

Für veraltete Browser, die den http://de.selfhtml.org/css/formate/zentrale.htm#attributbedingte@title=Attributselektor nicht kennen, könntest du auch Klassen vergeben.
Und wie könnte ich dann weitermachen?!?

Da hier im Intranet der IE6 verwendet wird, wären ja wohl nur Klassen möglich!? Die einfachste Möglichkeit wäre dann, diesen eine Hintergrundgrafik sowie einen daran angepassten Innenabstand zuzuweisen, oder?

Rock on!
Damian

[Gunnar Bittersmann]

Hello out there!

Ist "nur" innerhalb des Intranets gedacht

Dann wäre auch eine Lösung mit JavaScript denkbar?

Du könntest nach dem Laden einer Seite alle Links durchgehen und die Endung abfragen und übers DOM die entsprechenden Icons einfügen. Die Ausführung dauert aber ein Weilchen (je nach Seiteninhalt), könnte sein, dass sich das schon störend bemerkbar macht.

Die einfachste Möglichkeit wäre dann, diesen eine Hintergrundgrafik sowie einen daran angepassten Innenabstand zuzuweisen, oder?

Da der IE auch das Pseudoelement ::before nicht versteht, ja.

See ya up the road,
Gunnar

[Damian]

Dann wäre auch eine Lösung mit JavaScript denkbar?

Wäre denkbar; allerdings kenne ich mich damit so gut wie nicht aus.

Du könntest nach dem Laden einer Seite alle Links durchgehen und die Endung abfragen und übers DOM die entsprechenden Icons einfügen. Die Ausführung dauert aber ein Weilchen (je nach Seiteninhalt), könnte sein, dass sich das schon störend bemerkbar macht.

Wie würde ein entsprechendes Script denn ansatzweise aussehen?

Die einfachste Möglichkeit wäre dann, diesen eine Hintergrundgrafik sowie einen daran angepassten Innenabstand zuzuweisen, oder?

Da der IE auch das Pseudoelement ::before nicht versteht, ja.

Versucht habe ich es, allerdings wird nichts angezeigt...

Hier mal der entsprechende Teil meiner CSS-Datei:

.txt {
    background-image:url(txt.gif);
    padding-left: 20px;
  }

Und der Link, für den dies gelten soll:

<a href="Lizenz.txt" target="_blank" class="txt">Lizenzinformationen</a>

Grüße
Damian

[Gunnar Bittersmann]

Hello out there!

Du könntest nach dem Laden einer Seite alle Links durchgehen und die Endung abfragen und übers DOM die entsprechenden Icons einfügen.
Wie würde ein entsprechendes Script denn ansatzweise aussehen?

So wie ich das ansatzweise angedeutet hatte.

Du erstellst eine Collection aller Links (http://de.selfhtml.org/javascript/objekte/document.htm#get_elements_by_tag_name@title=getElementsByTagName()). In einer Schleife gehst du alle Links durch und liest jeweils deren href-Attribut (http://de.selfhtml.org/javascript/objekte/node.htm#get_attribute@title=getAttribute()). Von dessem Wert extrahierst du den Teil nach dem letzten '.'; abhängig davon (http://de.selfhtml.org/javascript/sprache/bedingt.htm#switch@title=switch) gibst du dem a-Element die entsprechende Klasse (http://de.selfhtml.org/javascript/objekte/node.htm#set_attribute@title=setAttribute()).

<a href="Lizenz.txt" target="_blank" class="txt">Lizenzinformationen</a>

Weg mit dem target-Attribut! Der Nutzer möchte selbst entscheiden, ob er ein neues Fenster/einen neuen Tab möchte oder nicht!

See ya up the road,
Gunnar

[Damian]

So, klappt jetzt!

Vielen Dank und noch einen schönen Tag!
Damian

[Gunnar Bittersmann]

Hello out there!

So, klappt jetzt!

Lass doch mal sehen!

Déjà vu? Nein, wirklich: In der Yahoo! Group usability-profis hatte jemand mal auf den Artikel Auskunftsfreudig: Links mit Javascript kennzeichnen verwiesen. Siehen auch meinen Kommentar dazu.

See ya up the road,
Gunnar

[Damian]

Lass doch mal sehen!

Also in meiner Layout.css habe ich jetzt verschiedene Klassen definiert, alle nach diesem Schema:

.txt {
    background:url(txt.gif) no-repeat;
    padding-left: 20px;
  }

Und dann eben die Links entsprechend ausgewiesen:

<a href="foo.txt" class="txt">Foo</a>

Auskunftsfreudig: Links mit Javascript kennzeichnen

Das sieht ja auch ganz gut aus! Da ich die Seite nur erstelle, sie danach aber auch von verschiedensten Personen bearbeitet werden soll, werde ich mir das nochmal genau anschauen. Bei meiner Lösung müsste ja jedem Link die entsprechende Klasse zugewiesen werden, was bei dem JS entfällt und somit die Wartung und Bearbeitung vereinfacht...

Vielen Dank und Grüße
Damian

[Gunnar Bittersmann]

Hello out there!

Also in meiner Layout.css habe ich jetzt verschiedene Klassen definiert, alle nach diesem Schema:
Und dann eben die Links entsprechend ausgewiesen:

Ach so, ich dachte, du hättest die Implementierung des JavaScripts schon fertig. Sonst hätte ich dir den Artikel Auskunftsfreudig: Links mit Javascript kennzeichnen doch noch nicht verraten. ;-)

Das sieht ja auch ganz gut aus!

Naj, ich find die Funktion addIcon() schon etwas kompliziert. Ich würd – wie erwähnt – nicht die Bilder einbauen, sondern Klassen zuweisen und dann wie du’s jetzt schon machst mit CSS die Icons darstellen.

Bei meiner Lösung müsste ja jedem Link die entsprechende Klasse zugewiesen werden, was bei dem JS entfällt und somit die Wartung und Bearbeitung vereinfacht...

So isses.

See ya up the road,
Gunnar

[Ashura]

Hallo Gunnar.

Du erstellst eine Collection aller Links (http://de.selfhtml.org/javascript/objekte/document.htm#get_elements_by_tag_name@title=getElementsByTagName()).

Wozu? Es gibt doch bereits eine.

In einer Schleife gehst du alle Links durch und liest jeweils deren href-Attribut (http://de.selfhtml.org/javascript/objekte/node.htm#get_attribute@title=getAttribute()).

Funktioniert dies im IE einwandfrei? Sollte man hier nicht besser auf die href-Eigenschaft des jeweiligen HTML-Objektes zugreifen?

Einen schönen Mittwoch noch.

Gruß, Ashura

[Robert Bienert]

Moin!

Da hier im Intranet der IE6 verwendet wird, wären ja wohl nur Klassen möglich!? Die einfachste Möglichkeit wäre dann, diesen eine Hintergrundgrafik sowie einen daran angepassten Innenabstand zuzuweisen, oder?

Warum so umständlich: [ref:self811;css/eigenschaften/listen.htm#list_style_image@title=list-style-image] wird schon seit MSIE 3 unterstützt. Eine Lösung deines Problems könnte daher so aussehen:

<head>  
<style type="text/css">  
[code lang=css].pdf {  
    list-style-image: url(img/pdf.png);  
}  
.txt {  
    list-style-image: url(img/text.png);  
}  
.doc {  
    list-style-image: url(img/worddoc.png);  
}  
  
/* … */

</style>
</head>
<body>
<a class="pdf" href="produktkatalog.pdf">Unsere Produkte</a>
<a class="txt" href="INSTALL">Installationsanleitung</a>
<a class="doc" href="bewerbung.doc">Vorlage für eine Bewerbung</a>
</body>[/code]

Viele Grüße,
Robert

[Gunnar Bittersmann]

Hello out there!

.pdf {
    list-style-image: url(img/pdf.png);
}
<a class="pdf" href="produktkatalog.pdf">Unsere Produkte</a>

Du widersprichst dir selbst (wirst es mit nächsten Posting getan haben):
„Mir scheint es allerdings […], dass die Formulierung „nur für ein Intranet“ häufig herhalten muss, um die konsequente und vorsätzliche Verletzung von Webstandards […] zu legitimieren. Warum sollen in Intranets andere, schwächere Qualitätsstandards als im Internet gelten?“

'list-style-image'
Angewendet auf: Elemente mit ''display: list-item' [CSS2 §12.6.2, CSS21 §12.5.1]

Laut Standard darf die Eigenschaft list-style-image in deinem Beispiel gar nicht wirken. Dass sie im IE doch wirkt ... – von der Ausnutzung seiner Fehler willst du ja gerade abraten.

See ya up the road,
Gunnar

[Robert Bienert]

Moin!

.pdf {
    list-style-image: url(img/pdf.png);
}
<a class="pdf" href="produktkatalog.pdf">Unsere Produkte</a>

Laut Standard darf die Eigenschaft list-style-image in deinem Beispiel gar nicht wirken. Dass sie im IE doch wirkt ... – von der Ausnutzung seiner Fehler willst du ja gerade abraten.

Ich bitte untertänigst um Entschuldigung, ich wollte die drei Links als Liste darstellen, hab dies nur beim Ausgestalten des Codebeispiels vergessen. Vielen Dank für deinen Einwand, der HTML-Code sollte natürlich so aussehen:

<ul>  
    <li class="pdf"><a href="produktkatalog.pdf">Unsere Produkte</a></li>  
    <li class="txt"><a href="INSTALL">Installationsanleitung</a></li>  
    <li class="doc"><a href="bewerbung.doc">Vorlage für eine Bewerbung</a></li>  
</ul>

Viele Grüße,
Robert

[Gunnar Bittersmann]

Hello out there!

Ich bitte untertänigst um Entschuldigung

Schon gut, steh wieder auf! ;-)

ich wollte die drei Links als Liste darstellen […]
    <li class="pdf"><a href="produktkatalog.pdf">Unsere Produkte</a></li>

1. Einwand: Die Klasse gehört (logisch gesehen) zum falschen Element.

2. Einwand: Das funzt dann nur bei Navigationslisten, während die andere Möglichkeit auch bei Links im Fließtext anwendbar ist (wie auch in SELFHTML).

See ya up the road,
Gunnar

[Robert Bienert]

Moin!

ich wollte die drei Links als Liste darstellen […]
    <li class="pdf"><a href="produktkatalog.pdf">Unsere Produkte</a></li>

1. Einwand: Die Klasse gehört (logisch gesehen) zum falschen Element.

Vollkommen korrekt, mein Vorschlag verletzt das Prinzip der Semantik.

2. Einwand: Das funzt dann nur bei Navigationslisten, während die andere Möglichkeit auch bei Links im Fließtext anwendbar ist (wie auch in SELFHTML).

Sind in SELFHTML nicht die Bilder vor die Links gesetzt, mittels img? Es wird Zeit, dass der MSIE :before kennenlernt.

Viele Grüße,
Robert

[Gunnar Bittersmann]

Hello out there!

Sind in SELFHTML nicht die Bilder vor die Links gesetzt, mittels img?

Ja, sind sie. Ich wollte mich bei dem Beispiel SELFHTML nur auf die Darstellung beziehen.

Es wird Zeit, dass der MSIE :before kennenlernt.

Auch das.

See ya up the road,
Gunnar

[Robert Bienert]

Moin!

Nimm es nicht persönlich, aber ich gebe hier nur meine allgemeinen Eindrücke unter Verwendung der folgenden Aussage wieder:

Ist "nur" innerhalb des Intranets gedacht und müsste daher schon stimmen. […]

Da hier im Intranet der IE6 verwendet wird, […]

Dass der meistbenutze Browser eine Krücke hinsichtlich der Umsetzung von Webstandards ist, dürfte allseits bekannt sein, von daher spricht erst einmal nichts dagegen, in einem homogenen Intranet, in welchem ausschließlich der MSIE zum Einsatz kommt, seinen CSS-Code mit diversen Hacks auszustatten. Vorteilhafterweise kommt in dieser Situation zum Tragen, dass man auf Browserweichen verzichten kann (um standardkonformen Browsern korrektes HTML+CSS zu servieren).

Mir scheint es allerdings, betrachtet man einige Posts der letzten Tage und Wochen, dass die Formulierung „nur für ein Intranet“ häufig herhalten muss, um die konsequente und vorsätzliche Verletzung von Webstandards sowie den Verzicht auf eine Gestaltung von Inhalten nach semantischen Gesichtspunkten zu legitimieren. Warum sollen in Intranets andere, schwächere Qualitätsstandards als im Internet gelten? Ich kann mir nicht vorstellen, dass dies ausschließlich mit der Faulheit der verantwortlichen Webmaster zu erklären ist.

Mit dem „Webservice-Hype“ drängt sich mir die Vermutung auf, dass Webseiten als serverbasierte Thin-Client-Lösungen herhalten sollen, eine Aufgabe, die mit HTML+JS teilweise zu meistern ist, allerdings im Widerspruch zur Idee einer Sprache ist, die der Auszeichnung von Hypertext dient.

Rock on!

P.S.: Beginner-Fan?

Viele Grüße,
Robert