Select Option Firefox vs Chrome – SELFHTML-Forum Forum als Ergänzung zum SELFHTML-Wiki und zur Dokumentation SELFHTML https://forum.selfhtml.org/self Select Option Firefox vs Chrome Fri, 15 Jan 16 12:08:31 Z https://forum.selfhtml.org/self/2016/jan/15/select-option-firefox-vs-chrome/1658824#m1658824 https://forum.selfhtml.org/self/2016/jan/15/select-option-firefox-vs-chrome/1658824#m1658824 <p>Hallo,</p> <p>ich verwende folgendes HTML:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</span> <span class="token attr-name">...</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">data-ng-repeat</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>type in xy<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{{type.name}}<span class="token punctuation">"</span></span> <span class="token attr-name">ng-style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{'border-left': '4px solid '+ type.color, 'color': type.color}<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">margin-bottom</span><span class="token punctuation">:</span> 2px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span> {{type.name}}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span> </code></pre> <p>In Firefox funktoniert das einwandfei und es wird ein border auf der linken seite angezeigt. I n chrome wird dieser Border aber nicht angezeigt. Weiß jemand was ich machen kann, damit dieser Border auch in Chome angezeigt wird?</p> <p>Danke Hannes</p> Select Option Firefox vs Chrome Fri, 15 Jan 16 12:20:04 Z https://forum.selfhtml.org/self/2016/jan/15/select-option-firefox-vs-chrome/1658825#m1658825 https://forum.selfhtml.org/self/2016/jan/15/select-option-firefox-vs-chrome/1658825#m1658825 <p>Hi,</p> <blockquote> <p>ich verwende folgendes HTML:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</span> <span class="token attr-name">...</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">data-ng-repeat</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>type in xy<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{{type.name}}<span class="token punctuation">"</span></span> <span class="token attr-name">ng-style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{'border-left': '4px solid '+ type.color, 'color': type.color}<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">margin-bottom</span><span class="token punctuation">:</span> 2px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span> {{type.name}}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span> </code></pre> </blockquote> <p>besser wäre es, du würdest das Markup zeigen, das tatsächlich beim Browser ankommt. Das sieht so aus, als ob da noch irgendeine Template-Engine oder sowas drüber herfällt, so dass man den resultierenden browserseitigen Quellcode nur erahnen kann.</p> <blockquote> <p>In Firefox funktoniert das einwandfei und es wird ein border auf der linken seite angezeigt. I n chrome wird dieser Border aber nicht angezeigt.</p> </blockquote> <p>Dann vermute ich mal, Chrome wendet einige CSS-Eigenschaften einfach nicht auf option-Elemente an.</p> <blockquote> <p>Weiß jemand was ich machen kann, damit dieser Border auch in Chome angezeigt wird?</p> </blockquote> <p>Da hast du wahrscheinlich schlechte Karten.</p> <p>So long,<br>  Martin</p> Select Option Firefox vs Chrome Fri, 15 Jan 16 12:35:49 Z https://forum.selfhtml.org/self/2016/jan/15/select-option-firefox-vs-chrome/1658829#m1658829 https://forum.selfhtml.org/self/2016/jan/15/select-option-firefox-vs-chrome/1658829#m1658829 <p>@@Hannes Weninger</p> <blockquote> <pre><code class="block language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">data-ng-repeat</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>type in xy<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{{type.name}}<span class="token punctuation">"</span></span> <span class="token attr-name">ng-style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{'border-left': '4px solid '+ type.color, 'color': type.color}<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">margin-bottom</span><span class="token punctuation">:</span> 2px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span> {{type.name}}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> </code></pre> </blockquote> <p>Pfui Inline-Styles! Den Rahmen solltest du auch im Stylesheet angeben können; den Abstand sowieso.</p> <pre><code class="block language-css"><span class="token selector">option</span> <span class="token punctuation">{</span> <span class="token property">border-left</span><span class="token punctuation">:</span> 4px solid<span class="token punctuation">;</span> <span class="token property">margin-bottom</span><span class="token punctuation">:</span> 2px <span class="token punctuation">}</span> </code></pre> <p>Ohne Farbangabe wird die Textfarbe genommen, genau das, was du willst.</p> <p>Im Markup bleibt nur</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">data-ng-repeat</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>type in xy<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{{type.name}}<span class="token punctuation">"</span></span> <span class="token attr-name">ng-style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{'color': type.color}<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> {{type.name}}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> </code></pre> <p>LLAP </p> <div class="signature">-- <br> „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“<br> „Hat auf dem Forum herumgelungert …“<br> (Wachen in Asterix 36: Der Papyrus des Cäsar) </div> Select Option Firefox vs Chrome Fri, 15 Jan 16 12:38:07 Z https://forum.selfhtml.org/self/2016/jan/15/select-option-firefox-vs-chrome/1658831#m1658831 https://forum.selfhtml.org/self/2016/jan/15/select-option-firefox-vs-chrome/1658831#m1658831 <p>@@Hannes Weninger</p> <blockquote> <pre><code class="block language-⁠HTML"></code></pre> </blockquote> <p>Das muss klein geschrieben werden, damit es als bekannte Sprache erkannt wird und Syntax-Highlighting wirkt.</p> <p>@Christian Kruse: Könnte man das nicht case-insensitive machen?</p> <p>LLAP </p> <div class="signature">-- <br> „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“<br> „Hat auf dem Forum herumgelungert …“<br> (Wachen in Asterix 36: Der Papyrus des Cäsar) </div> Select Option Firefox vs Chrome Fri, 15 Jan 16 12:30:18 Z https://forum.selfhtml.org/self/2016/jan/15/select-option-firefox-vs-chrome/1658828#m1658828 https://forum.selfhtml.org/self/2016/jan/15/select-option-firefox-vs-chrome/1658828#m1658828 <p>@@Der Martin</p> <blockquote> <p>besser wäre es, du würdest das Markup zeigen, das tatsächlich beim Browser ankommt. Das sieht so aus, als ob da noch irgendeine Template-Engine oder sowas drüber herfällt,</p> </blockquote> <p>Angular. Zu erkennen an <code>ng-</code>.</p> <blockquote> <p>so dass man den resultierenden browserseitigen Quellcode nur erahnen kann.</p> </blockquote> <p>Es <em>ist</em> der browserseitige Quellcode. Das ist das Traurige.</p> <blockquote> <p>Dann vermute ich mal, Chrome wendet einige CSS-Eigenschaften einfach nicht auf option-Elemente an.</p> </blockquote> <p><a href="https://forum.selfhtml.org/meta/2016/jan/2/neues-anfaenger-tutorial-fuer-javascript-tic-tac-toe/1658806#m1658806" rel="noopener noreferrer">So weit</a> war ich auch schon.</p> <p>LLAP </p> <div class="signature">-- <br> „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“<br> „Hat auf dem Forum herumgelungert …“<br> (Wachen in Asterix 36: Der Papyrus des Cäsar) </div> Select Option Firefox vs Chrome Fri, 15 Jan 16 12:36:07 Z https://forum.selfhtml.org/self/2016/jan/15/select-option-firefox-vs-chrome/1658830#m1658830 https://forum.selfhtml.org/self/2016/jan/15/select-option-firefox-vs-chrome/1658830#m1658830 <p>Hallo,</p> <blockquote> <blockquote> <p>Das sieht so aus, als ob da noch irgendeine Template-Engine oder sowas drüber herfällt,</p> </blockquote> <p>Angular. Zu erkennen an <code>ng-</code>.</p> </blockquote> <p>zu erkennen? Okay, wenn man's weiß. Ich kenn' das Zeug nur dem Namen nach.</p> <blockquote> <blockquote> <p>so dass man den resultierenden browserseitigen Quellcode nur erahnen kann.</p> </blockquote> <p>Es <em>ist</em> der browserseitigen Quellcode. Das ist das Traurige.</p> </blockquote> <p>Die produzieren mit ihren Phantasie-Attributen bewusst invalides HTML? Das ist in der Tat traurig.</p> <p>So long,<br>  Martin</p> Select Option Firefox vs Chrome Fri, 15 Jan 16 12:41:51 Z https://forum.selfhtml.org/self/2016/jan/15/select-option-firefox-vs-chrome/1658832#m1658832 https://forum.selfhtml.org/self/2016/jan/15/select-option-firefox-vs-chrome/1658832#m1658832 <p>Tach!</p> <blockquote> <blockquote> <p>besser wäre es, du würdest das Markup zeigen, das tatsächlich beim Browser ankommt. Das sieht so aus, als ob da noch irgendeine Template-Engine oder sowas drüber herfällt,</p> </blockquote> <p>Angular. Zu erkennen an <code>ng-</code>.</p> <blockquote> <p>so dass man den resultierenden browserseitigen Quellcode nur erahnen kann.</p> </blockquote> <p>Es <em>ist</em> der browserseitigen Quellcode. Das ist das Traurige.</p> </blockquote> <p>Das ist nicht traurig, sondern schon lange und auch ohne Angular üblich. Man muss hier genauso seine Arbeitsweise ändern, wie man das auch bei anderem DOM-manipulierendem Javascript machen muss: anschauen, wie das DOM aussieht.</p> <p>dedlfix.</p> Select Option Firefox vs Chrome Fri, 15 Jan 16 12:59:18 Z https://forum.selfhtml.org/self/2016/jan/15/select-option-firefox-vs-chrome/1658834#m1658834 https://forum.selfhtml.org/self/2016/jan/15/select-option-firefox-vs-chrome/1658834#m1658834 <p>Tach!</p> <blockquote> <p>Pfui Inline-Styles! Den Rahmen solltest du auch im Stylesheet angeben können; den Abstand sowieso.</p> <p>[...]</p> <p>Im Markup bleibt nur</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">data-ng-repeat</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>type in xy<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{{type.name}}<span class="token punctuation">"</span></span> <span class="token attr-name">ng-style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{'color': type.color}<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> {{type.name}}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> </code></pre> </blockquote> <p>Ach, und nun ist Inline-Style ok? Warum plädierst du hier nicht auch dafür, statt die Farbe direkt zu setzen, einen Klassenbezeichner zu vergeben? Zumindest kann man das als Vorschlag anbieten, der dann umzusetzen geht, wenn die Farbe nicht element-individuell ist, sondern aufgrund irgendwelcher anderer Eigenschaften mit abzählbaren Werten vergeben wird.</p> <p>dedlfix.</p> Select Option Firefox vs Chrome Fri, 15 Jan 16 20:23:43 Z https://forum.selfhtml.org/self/2016/jan/15/select-option-firefox-vs-chrome/1658849#m1658849 https://forum.selfhtml.org/self/2016/jan/15/select-option-firefox-vs-chrome/1658849#m1658849 <blockquote> <pre><code class="block language-css"><span class="token selector">option</span> <span class="token punctuation">{</span> <span class="token property">border-left</span><span class="token punctuation">:</span> 4px solid<span class="token punctuation">;</span> <span class="token property">margin-bottom</span><span class="token punctuation">:</span> 2px <span class="token punctuation">}</span> </code></pre> </blockquote> <p>Vielen Danke für die Antowrten. leider funktioniert das nur wieder im FF aber nicht im Chrome und auch nicht im IE :-(</p> <p>BG Hannes</p> Select Option Firefox vs Chrome Fri, 15 Jan 16 12:48:48 Z https://forum.selfhtml.org/self/2016/jan/15/select-option-firefox-vs-chrome/1658833#m1658833 https://forum.selfhtml.org/self/2016/jan/15/select-option-firefox-vs-chrome/1658833#m1658833 <p>Tach!</p> <blockquote> <p>Die produzieren mit ihren Phantasie-Attributen bewusst invalides HTML? Das ist in der Tat traurig.</p> </blockquote> <p>Validität ist kein Selbstzweck. Es gibt alternative Schreibweisen, wenn man auf Validität angewiesen ist, aber wann hat man denn das als zwingend nötige Voraussetzung? Man muss es also nicht komplizierter machen, als es notwendig ist, und verwendet die einfacher zu verwendende Hauptschreibweise für Angular-Direktiven (Direktiven können Elemente oder Attribute sein). Das Ziel von Angular-durchsetztem HTML-Code ist nicht, dass der Browser alles korrekt versteht, denn Angular kommt noch daher und manipuliert das DOM entsprechend den Angular-Anweisungen.</p> <p>dedlfix.</p> Select Option Firefox vs Chrome Fri, 15 Jan 16 13:54:32 Z https://forum.selfhtml.org/self/2016/jan/15/select-option-firefox-vs-chrome/1658837#m1658837 https://forum.selfhtml.org/self/2016/jan/15/select-option-firefox-vs-chrome/1658837#m1658837 <p>@@Der Martin</p> <blockquote> <p>Die produzieren mit ihren Phantasie-Attributen bewusst invalides HTML? Das ist in der Tat traurig.</p> </blockquote> <p>Zumindest hat man bei Angular noch sowas wie HTML. Im Gegensatz zu manch anderem JavaScript-Framework. :-(</p> <p>In dem Zusammenhang (oder auch nicht): [für hier vorgesehene Links <a href="https://forum.selfhtml.org/self/2016/jan/15/sad-state-real-problems-fallacies/1658836#m1658836" rel="noopener noreferrer">neuen Thread</a> aufgemacht]</p> <p>LLAP </p> <div class="signature">-- <br> „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“<br> „Hat auf dem Forum herumgelungert …“<br> (Wachen in Asterix 36: Der Papyrus des Cäsar) </div> Select Option Firefox vs Chrome Fri, 15 Jan 16 23:07:09 Z https://forum.selfhtml.org/self/2016/jan/15/select-option-firefox-vs-chrome/1658853#m1658853 https://forum.selfhtml.org/self/2016/jan/15/select-option-firefox-vs-chrome/1658853#m1658853 <p>Hallo Gunnar,</p> <blockquote> <p>@Christian Kruse: Könnte man das nicht case-insensitive machen?</p> </blockquote> <p>Sollte es eigentlich eh sein. Ist vermutlich mit der Umstellung auf Rouge kaputt gegangen. Wie auch immer, <a href="https://github.com/ckruse/cforum/commit/20bd67ea441d0d0c3775c85c30daa9b4ca374442" rel="noopener noreferrer">fixed</a>.</p> <p>LG,<br> CK</p> <div class="signature">-- <br> <a href="https://wwwtech.de/about" rel="noopener noreferrer">https://wwwtech.de/about</a> </div> Select Option Firefox vs Chrome Fri, 15 Jan 16 23:51:40 Z https://forum.selfhtml.org/self/2016/jan/15/select-option-firefox-vs-chrome/1658856#m1658856 https://forum.selfhtml.org/self/2016/jan/15/select-option-firefox-vs-chrome/1658856#m1658856 <p>Aloha ;)</p> <blockquote> <blockquote> <p>Es <em>ist</em> der browserseitigen Quellcode. Das ist das Traurige.</p> </blockquote> <p>Das ist nicht traurig, sondern schon lange und auch ohne Angular üblich.</p> </blockquote> <p>Nur, weil das auch woanders so ist, ist es nicht weniger traurig. Sondern eher noch mehr, meinem Empfinden nach, weil ich das Konzept für ungeeignet halte.</p> <blockquote> <p>Man muss hier genauso seine Arbeitsweise ändern, wie man das auch bei anderem DOM-manipulierendem Javascript machen muss: anschauen, wie das DOM aussieht.</p> </blockquote> <p>Das Problem ist nicht grundsätzlich dadurch gegeben, dass das DOM durch JS manipuliert wird (was ja auch mit seine Aufgabe ist), sondern, dass grundlegende Prinzipien (unobtrusive Javascript, progressive enhancement, separation of concerns) dadurch mindestens beeinträchtigt, eher verletzt werden. Kann man machen, aber man sollte sich einfach im Klaren darüber sein, dass sowas in gewissem Sinne eine Zweckentfremdung darstellt, mit allen potenziellen Problematiken, die das mit sich bringt (z.B. Selbstverständlichkeiten, die sonst gegeben sind und auf einmal unvorhergesehen wegfallen oder wegfallende spezielle Optimierung). Kann man machen, muss man nicht. Für empfehlenswert halte ich es nicht. (Natürlich auch nicht für verteufelnswert, falls der Eindruck aufgekommen sein sollte...) Ich zumindest würde mir Lösungen suchen, die mit weniger potenziellen Seiteneffekten behaftet sind. Sowas wie dieser Quelltext sieht mir nicht nach dem aus, was ich von einer professionellen Lösung erwarten würde. Umso schlimmer, dass der Grund dafür ein weitverbreitetes Framework ist.</p> <p>Grüße,</p> <p>RIDER</p> <div class="signature">-- <br> Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller Erreichbar manchmal im Self-TS (ts.selfhtml.org) oder sonst - wenn online - auf dem <a href="http://www.tsviewer.com/index.php?page=ts_viewer&ID=1060332" rel="nofollow noopener noreferrer">eigenen TeamSpeak-Server</a> (fritz.campingrider.de) oder unter: # <a href="http://www.tsviewer.com/index.php?page=ts_viewer&ID=1060332" rel="nofollow noopener noreferrer">Facebook</a> # <a href="https://twitter.com/Camping_RIDER" rel="nofollow noopener noreferrer">Twitter</a> # <a href="http://steamcommunity.com/id/Camping_RIDER" rel="nofollow noopener noreferrer">Steam</a> # <a href="https://www.youtube.com/user/RidersFlame" rel="nofollow noopener noreferrer">YouTube</a> # <a href="http://wiki.selfhtml.org/wiki/Benutzer:Camping_RIDER" rel="nofollow noopener noreferrer">Self-Wiki</a> # ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[ </div> Select Option Firefox vs Chrome Sat, 16 Jan 16 01:18:55 Z https://forum.selfhtml.org/self/2016/jan/15/select-option-firefox-vs-chrome/1658858#m1658858 https://forum.selfhtml.org/self/2016/jan/15/select-option-firefox-vs-chrome/1658858#m1658858 <p>@@dedlfix</p> <blockquote> <blockquote> <p>Es <em>ist</em> der browserseitigen Quellcode. Das ist das Traurige.</p> </blockquote> <p>Das ist nicht traurig …</p> <p>wie man das auch bei anderem DOM-manipulierendem Javascript machen muss: anschauen, wie das DOM aussieht.</p> </blockquote> <p>Bei manchen Frameworks will man sich nicht anschauen, wie das DOM aussieht. Sonst kommt einem das K*tzen.</p> <p><img src="/images/1c79e0c5-fed5-4733-8598-f2f1472fd001.png" alt="DOM bei ExtJS: div-Suppe, viele Attribute (präsentatoinsbezogen)" loading="lazy"></p> <p>Ein Beispiel aus dem RL.</p> <p><em>Das</em> ist das Traurige.</p> <p>LLAP </p> <div class="signature">-- <br> „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“<br> „Hat auf dem Forum herumgelungert …“<br> (Wachen in Asterix 36: Der Papyrus des Cäsar) </div> Select Option Firefox vs Chrome Fri, 15 Jan 16 23:43:15 Z https://forum.selfhtml.org/self/2016/jan/15/select-option-firefox-vs-chrome/1658855#m1658855 https://forum.selfhtml.org/self/2016/jan/15/select-option-firefox-vs-chrome/1658855#m1658855 <p>Aloha ;)</p> <blockquote> <blockquote> <p>Die produzieren mit ihren Phantasie-Attributen bewusst invalides HTML? Das ist in der Tat traurig.</p> </blockquote> <p>Validität ist kein Selbstzweck.</p> </blockquote> <p>Nein, wahrlich nicht. Aber es gibt Gründe und eben jene sind in diesem Fall tatsächlich verletzt. Beispilsweise wenn man die Maschinenlesbarkeit anführt, die für Suchmaschinen wichtig ist. Da ist das...</p> <blockquote> <p>Das Ziel von Angular-durchsetztem HTML-Code ist nicht, dass der Browser alles korrekt versteht, denn Angular kommt noch daher und manipuliert das DOM entsprechend den Angular-Anweisungen.</p> </blockquote> <p>...nur ein schwacher Trost, da das dann (und nur dann) geschieht, sobald JavaScript geladen und interpretiert wurde. Wehe, wenn das nicht passiert (wie zum Beispiel, wenn nur ein Suchmaschinen-Crawler drüberläuft), denn dann ist das Markup tatsächlich kaputt. Meiner Meinung nach ist das genau das, was ein Framework eigentlich nicht tun sollte.</p> <p>Ein Framework sollte nach meinem Verständnis den Zugriff auf oft benötigte Elemente (nicht im HTML-Sinn) erleichtern, dient also als enhancement auf Basis der grundlegenden Technologie, auf der das Framework aufsetzt. Insbesondere ist es sehr problematisch, wenn ein JS-Framework verlangt oder dazu verleitet, invaliden HTML-Code zu kreieren, das würde ich als problematischen Seiteneffekt bezeichnen - ganz abgesehen davon, dass JavaScript aus guten Gründen <strong>sinnvollerweise</strong> als progressive enhancement eingesetzt werden <strong>sollte</strong>, das betrifft auch JS-Frameworks. Immerhin predigt man aus Gründen schon länger, dass JS <em>unobtrusive</em> eingesetzt werden sollte, was durch Angular dann offenbar auch nicht sinnvoll unterstützt wird.</p> <p>Natürlich kann man das dann deshalb trotzdem einsetzen, wenn man das denn möchte. Wenn es Dinge vereinfacht und man sich bewusst entscheidet, die Einschnitte hinzunehmen - meinetwegen. Zumindest ist der Effekt vor allem für Suchmaschinen problematisch; assistive Technologien (Thema Barrierefreiheit) werden durch das benötigte Javascript ja nicht zwangsläufig negativ beeinflusst. Trotzdem denke ich, dass an Martins Einschätzung</p> <blockquote> <blockquote> <p>Die produzieren mit ihren Phantasie-Attributen bewusst invalides HTML? Das ist in der Tat traurig.</p> </blockquote> </blockquote> <p>nicht viel relativierungsbedürftig ist. Zwar mag der Schaden verhältnismäßig gering sein, trotzdem bin ich davon überzeugt, dass das Konzept, auf das in Angular dann scheinbar in diesem speziellen Fall gesetzt wird (ich habe keine Erfahrung mit Angular, kann mich also nur auf den Eindruck berufen, den ich hier gewonnen habe), kaputt oder mindestens ungünstig/suboptimal ist...</p> <p>Grüße,</p> <p>RIDER</p> <div class="signature">-- <br> Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller Erreichbar manchmal im Self-TS (ts.selfhtml.org) oder sonst - wenn online - auf dem <a href="http://www.tsviewer.com/index.php?page=ts_viewer&ID=1060332" rel="nofollow noopener noreferrer">eigenen TeamSpeak-Server</a> (fritz.campingrider.de) oder unter: # <a href="http://www.tsviewer.com/index.php?page=ts_viewer&ID=1060332" rel="nofollow noopener noreferrer">Facebook</a> # <a href="https://twitter.com/Camping_RIDER" rel="nofollow noopener noreferrer">Twitter</a> # <a href="http://steamcommunity.com/id/Camping_RIDER" rel="nofollow noopener noreferrer">Steam</a> # <a href="https://www.youtube.com/user/RidersFlame" rel="nofollow noopener noreferrer">YouTube</a> # <a href="http://wiki.selfhtml.org/wiki/Benutzer:Camping_RIDER" rel="nofollow noopener noreferrer">Self-Wiki</a> # ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[ </div> Select Option Firefox vs Chrome Sat, 16 Jan 16 08:40:30 Z https://forum.selfhtml.org/self/2016/jan/15/select-option-firefox-vs-chrome/1658861#m1658861 https://forum.selfhtml.org/self/2016/jan/15/select-option-firefox-vs-chrome/1658861#m1658861 <p>@@dedlfix</p> <blockquote> <p>Validität ist kein Selbstzweck.</p> </blockquote> <p>Da besitzt doch der Validator die Chuzpe, meine <a href="http://gunnarbittersmann.de/songs/save-the-last-talk-for-me" rel="nofollow noopener noreferrer">Seiten wie diese</a> zu bemängeln. Der kommt mit <em>custom elements</em> nicht klar.</p> <p>Was kann ich dafür, dass Hixie/WHATWG den <a href="https://twitter.com/g16n/status/509234788386230273" rel="nofollow noopener noreferrer">Sinn des <code>l</code>-Elements</a> nicht erkannt haben?</p> <p>LLAP </p> <div class="signature">-- <br> „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“<br> „Hat auf dem Forum herumgelungert …“<br> (Wachen in Asterix 36: Der Papyrus des Cäsar) </div> Select Option Firefox vs Chrome Fri, 15 Jan 16 14:07:36 Z https://forum.selfhtml.org/self/2016/jan/15/select-option-firefox-vs-chrome/1658838#m1658838 https://forum.selfhtml.org/self/2016/jan/15/select-option-firefox-vs-chrome/1658838#m1658838 <p>@@dedlfix</p> <blockquote> <p>Ach, und nun ist Inline-Style ok? Warum plädierst du hier nicht auch dafür, statt die Farbe direkt zu setzen, einen Klassenbezeichner zu vergeben? Zumindest kann man das als Vorschlag anbieten, der dann umzusetzen geht, wenn die Farbe nicht element-individuell ist, sondern aufgrund irgendwelcher anderer Eigenschaften mit abzählbaren Werten vergeben wird.</p> </blockquote> <p>Ich denke, du meinst „abzählbar“ nicht in dem in der Mengenlehre gebräuchlichen Sinn. ;-)</p> <p>Ja, wenn es wirklich nur eine Handvoll<sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup> Farben sind, kann man natürlich Klassen o.ä. verwenden. Und diese sinnvoll benennen.</p> <p>Ansonsten ist <code>class="darkblue"</code> genauso präsentationsbezogenes Markup wie <code>style="color: darkblue"</code>.</p> <p>LLAP </p> <div class="signature">-- <br> „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“<br> „Hat auf dem Forum herumgelungert …“<br> (Wachen in Asterix 36: Der Papyrus des Cäsar) </div> <hr class="footnotes-sep"> <section class="footnotes"> <ol class="footnotes-list"> <li id="fn1" class="footnote-item"><p>ohne mich darauf festlegen zu wollen, ob eine Hand auch 20+ Finger haben kann <a href="#fnref1" class="footnote-backref">↩︎</a></p> </li> </ol> </section> Select Option Firefox vs Chrome Fri, 15 Jan 16 14:18:26 Z https://forum.selfhtml.org/self/2016/jan/15/select-option-firefox-vs-chrome/1658839#m1658839 https://forum.selfhtml.org/self/2016/jan/15/select-option-firefox-vs-chrome/1658839#m1658839 <p>Tach!</p> <blockquote> <p>Ich denke, du meinst „abzählbar“ nicht in dem in der Mengenlehre gebräuchlichen Sinn. ;-)</p> </blockquote> <p>Ich meine eine definierte Menge mit feststehender Elementenanzahl, die man auch abzählen wollen würde. 16,7 Mio Farben sind theoretisch abzählbar, praktisch tut das aber niemand.</p> <blockquote> <p>Ansonsten ist <code>class="darkblue"</code> genauso präsentationsbezogenes Markup wie <code>style="color: darkblue"</code>.</p> </blockquote> <p>Den Klassennamen sollte man dann nach der die Farbe bestimmenden Eigenschaft wählen. Das vergaß ich zu erwähnen.</p> <p>dedlfix.</p> Select Option Firefox vs Chrome Fri, 15 Jan 16 21:00:44 Z https://forum.selfhtml.org/self/2016/jan/15/select-option-firefox-vs-chrome/1658850#m1658850 https://forum.selfhtml.org/self/2016/jan/15/select-option-firefox-vs-chrome/1658850#m1658850 <p>Hi,</p> <blockquote> <p>ohne mich darauf festlegen zu wollen, ob eine Hand auch 20+ Finger haben kann</p> </blockquote> <p>hüte dich vor Leuten, die auf ihren 10 Fingern bis 2¹⁰-1 zählen können. Das sind Programmierer! Und hüte dich davor, das selbst auch zu tun, ohne genau aufzupassen: Wenn man den Leuten die Vier zeigt, reagieren manche sehr unwirsch. ;-)</p> <p>Ciao,<br>  Martin</p> Select Option Firefox vs Chrome Sat, 16 Jan 16 00:53:15 Z https://forum.selfhtml.org/self/2016/jan/15/select-option-firefox-vs-chrome/1658857#m1658857 https://forum.selfhtml.org/self/2016/jan/15/select-option-firefox-vs-chrome/1658857#m1658857 <p>@@Der Martin</p> <blockquote> <p>hüte dich vor Leuten, die auf ihren 10 Fingern bis 2¹⁰-1 zählen können. Das sind Programmierer!</p> </blockquote> <p>Oder gar vor Leuten, die auf ihren 10 Fingern von −2⁹ bis 2⁹−1 zählen können. <em>Das</em> sind Programmierer!</p> <blockquote> <p>Und hüte dich davor, das selbst auch zu tun, ohne genau aufzupassen: Wenn man den Leuten die Vier zeigt, reagieren manche sehr unwirsch. ;-)</p> </blockquote> <p>Gimme five—ehm four!</p> <p>LLAP </p> <div class="signature">-- <br> „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“<br> „Hat auf dem Forum herumgelungert …“<br> (Wachen in Asterix 36: Der Papyrus des Cäsar) </div> Select Option Firefox vs Chrome Sat, 16 Jan 16 08:56:32 Z https://forum.selfhtml.org/self/2016/jan/15/select-option-firefox-vs-chrome/1658862#m1658862 https://forum.selfhtml.org/self/2016/jan/15/select-option-firefox-vs-chrome/1658862#m1658862 <p>Tach!</p> <blockquote> <blockquote> <p>Validität ist kein Selbstzweck.</p> </blockquote> <p>Nein, wahrlich nicht. Aber es gibt Gründe und eben jene sind in diesem Fall tatsächlich verletzt. Beispilsweise wenn man die Maschinenlesbarkeit anführt, die für Suchmaschinen wichtig ist.</p> </blockquote> <p>Wenn man Gründe hat, eine SPA oder andere ganz erheblich im DOM rumfummelnde Webseite zu erstellen, spielt die statische Analyse durch Spider üblicherweise eine untergeordnete bis gar keine Rolle - zumindest für den Teil, der diesen mehr oder weniger heftigen Veränderungen unterliegt.</p> <p>Die Maschinenlesbarkeit an sich ist ja nicht zwangsläufig gefährdet. Die Maschine muss sich aber am DOM orientieren und nicht am Quellcode. Wenn eine assistive Technik im DOM liest, wird alles gut, denn die SPA muss ja für den Browser und damit auch für die assistive Technik verständliche Ergebnisse erzeugen. Ob darin ungenormte Elemente vorkommen oder nicht, spielt dabei keine Rolle - darf dabei keine Rolle spielen. Ein Browser wird diese ignorieren, so wie er es schon immer getan hat, und andererseits sind diese Elemente ja auch gar nicht direkt dafür vorgesehen, vom Anwender gesehen zu werden. Das sind nur Anweisungen für die SPA. AngularJS verhindert ja beispielsweise auch nicht, dass aria-Attribute eingefügt werden. Im Gegenteil bringt es sogar ein Modul mit, mit dem diese Attribute angular-like in die entsprechenden (DOM-)Elemente eingefügt werden können. Andererseits werden, wenn man dieses Modul verwendet, einige (sinnvolle) Attribute auch automatisch eingefügt, wenn sie der Entwickler nicht selbst angegeben hat.</p> <p>Vergleich eine SPA mal mit einer Desktop-Anwendung, da muss auch keine (assistive) Maschine den Qellcode oder den Maschinencode lesen. Quellcode kommt in den meisten Fällen auch gar nicht zum Anwender, weil der beim Entwickler verbleibt, und der Maschienncode ist nur für die CPU von Interesse. Wichtig ist nur, was auf dem Bildschirm oder anderen Ausgabemedien erscheint. Und auch da gibt es Unterschiede. Bei einem Spiel ist oft gar nicht möglich, dass eine assisitive Technik das sinnvoll für andere Sinnesorgane übersetzen kann, bei Textanwendungen ist das schon eher machbar. Das kann nun aber nicht zur Schlussfolgerung haben, dass man keine Spiele mehr erstellen sollte, weil ein Teil der Menschen sie bedauerlicherweise nicht spielen kann.</p> <p>Zurück zum HTML & Co. Wenn es nicht (nur) um assistive Techniken geht, sondern den Spidern was zum Futtern zu geben, muss man sich was anderes einfallen lassen, als die SPA in ihr selbst vorzustellen. Für den Zweck kann man immer noch eine gute alte statische Seite (oder eine statisch sinnvoll lesbare) als Landing Page erstellen. - Und auch das braucht man nicht für sämtliche Einsatzzwecke von SPAs. Es gibt genügend Anwendungen, die im Browser laufen, aber nur firmenintern zur Verfügung stehen sollen und die öffentlichen Spider überhaupt nichts angehen.</p> <blockquote> <p>Da ist das...</p> <blockquote> <p>Das Ziel von Angular-durchsetztem HTML-Code ist nicht, dass der Browser alles korrekt versteht, denn Angular kommt noch daher und manipuliert das DOM entsprechend den Angular-Anweisungen.</p> </blockquote> <p>...nur ein schwacher Trost, da das dann (und nur dann) geschieht, sobald JavaScript geladen und interpretiert wurde. Wehe, wenn das nicht passiert (wie zum Beispiel, wenn nur ein Suchmaschinen-Crawler drüberläuft), denn dann ist das Markup tatsächlich kaputt. Meiner Meinung nach ist das genau das, was ein Framework eigentlich nicht tun sollte.</p> </blockquote> <p>Du gehst nicht von für SPAs vorgesehenen Einsatzszenarien aus, sondern von öffentlichen Webseiten zu allgemeinen Informationszwecken. Das ist eine andere Baustelle.</p> <blockquote> <p>Ein Framework sollte nach meinem Verständnis den Zugriff auf oft benötigte Elemente (nicht im HTML-Sinn) erleichtern, dient also als enhancement auf Basis der grundlegenden Technologie, auf der das Framework aufsetzt. Insbesondere ist es sehr problematisch, wenn ein JS-Framework verlangt oder dazu verleitet, invaliden HTML-Code zu kreieren, das würde ich als problematischen Seiteneffekt bezeichnen - ganz abgesehen davon, dass JavaScript aus guten Gründen <strong>sinnvollerweise</strong> als progressive enhancement eingesetzt werden <strong>sollte</strong>, das betrifft auch JS-Frameworks. Immerhin predigt man aus Gründen schon länger, dass JS <em>unobtrusive</em> eingesetzt werden sollte, was durch Angular dann offenbar auch nicht sinnvoll unterstützt wird.</p> </blockquote> <p>Abgesehen davon, dass das deutsche Wort für side effects Nebenwirkungen heißt ... auch unobtrusive Javascript ist kein Selbstzweck, sondern hat ein genauso begrenztes Einsatzgebiet, wie SPAs ihrerseits eins haben. Und diese Einsatzgebiete müssen sich nicht zu 100% überschneiden.</p> <p>Was bringt es außerdem für Vorteile, wenn man (im Falle von Attributen, für Elemente geht das nicht) nicht ng-attribute sondern data-ng-attribute nimmt? Dann hast du außer validem HTML immer noch keinen direkten Nutzen für Spider oder assistive Techniken. Es bleibt weiterhin ein Attribut, das lediglich für die Interpretation durch Angular vorgesehen ist. Alles was der Browser zur Anzeige bringen soll, wird ja weiterhin in HTML etc. übersetzt und steht dann DOM-lesenden Techniken zur Verfügung. Nur eben nicht den Spidern, die dafür keine Zielgruppe sind.</p> <blockquote> <p>Trotzdem denke ich, dass an Martins Einschätzung</p> <blockquote> <blockquote> <p>Die produzieren mit ihren Phantasie-Attributen bewusst invalides HTML? Das ist in der Tat traurig.</p> </blockquote> </blockquote> <p>nicht viel relativierungsbedürftig ist.</p> </blockquote> <p>Relativierungsbedürftig finde ich sie auch nicht, sondern von falschen, zu eng begrenzten Voraussetzungen ausgehend, womit sie in weiten Teilen ungeeignet ist, die komplette aktuelle Vielfalt zu beurteilen. Das muss nicht relativiert, sondern durch Wissen um aktuelle Gegebenheiten und weitere Anwendungsfälle erweitert werden.</p> <blockquote> <p>Zwar mag der Schaden verhältnismäßig gering sein, trotzdem bin ich davon überzeugt, dass das Konzept, auf das in Angular dann scheinbar in diesem speziellen Fall gesetzt wird (ich habe keine Erfahrung mit Angular, kann mich also nur auf den Eindruck berufen, den ich hier gewonnen habe), kaputt oder mindestens ungünstig/suboptimal ist...</p> </blockquote> <p>Das ist wieder zu engstirnig gedacht. Niemand kommt allein durch die Existenz von SPAs für ganz bestimmte Anwendungsfälle zu Schaden. Sie erweitern die Möglichkeiten für browserbedienbare Anwendungsfälle. Und genausowenig, wie sämtliche statisch lesbare Seiten für die Öffentlichkeit zugänglich und vorgesehen sind, gilt das auch für SPAs. Nicht umsonst gibt es die robots.txt und andere Dinge, mit denen ganz bewusst auch valider HTML-Code durch das maschinelle Lesen (in dem Falle Spider) ausgeschlossen werden soll.</p> <p>Kurzfassung: Maschinenlesbarkeit ist auch kein Selbstzweck.</p> <p>dedlfix.</p> Select Option Firefox vs Chrome Sat, 16 Jan 16 09:03:26 Z https://forum.selfhtml.org/self/2016/jan/15/select-option-firefox-vs-chrome/1658863#m1658863 https://forum.selfhtml.org/self/2016/jan/15/select-option-firefox-vs-chrome/1658863#m1658863 <p>Tach!</p> <blockquote> <p>Das Problem ist nicht grundsätzlich dadurch gegeben, [...]</p> </blockquote> <p>Es gibt kein grundsätzliches Problem, das eine grundsätzliche Lösung fordert. Es gibt solche und solche Anwendungsfälle und damit solche und solche Lösungen. Alles weitere siehe <a href="https://forum.selfhtml.org/self/2016/jan/15/select-option-firefox-vs-chrome/1658862#m1658862" rel="noopener noreferrer">in meiner anderen Antwort</a>.</p> <p>dedlfix.</p>