Html5-boilerplate: ::Auswahl Hintergrundfarbe Standard

Ich liebe es, Text auf einer Website auszuwählen und zu sehen, dass er pink ist und zu wissen, dass sie die Boilerplate verwendet haben.

Ich stimme dafür, dass es pink bleibt; Wenn es eher eine Ermutigung für die Leute ist, es zu ändern, wenn es nur das Standardblau wäre, würde es jeder nicht bemerken und es einfach lassen, dann hätten wir wieder langweilige Seiten.

Vielen Dank für die Einreichung dieses Problems, Nicolas.

Ich denke, Pink ist eine schlechte Wahl für die Textauswahl, da es so offensichtlich ist und oft nicht zum Design vieler Websites passt - die Textauswahl auf Websites, auf denen dieser Wert nicht geändert wurde, kann ziemlich störend sein. Ich würde die Verwendung einer neutraleren Farbe empfehlen; Blau- oder Grautöne sind normalerweise eine gute Wahl, aber vielleicht könnte auch ein blasses Gelb funktionieren.

Ich denke, dies hängt mit dem zugrunde liegenden Problem zusammen, dass Leute den Inhalt der Boilerplate nicht studieren und sie ohne Anpassung en gros verwenden. Es mag Grenzen geben, wie sehr Sie die Leute ermutigen können, weniger faul zu sein (und dies widerspricht möglicherweise dem Ethos eines Boilerplates), aber ich würde mir mehr Kommunikation rund um das Anpassen und Anpassen der Dateien wünschen. Vielleicht muss das in einer anderen Ausgabe abgelegt werden ;-)

Schließlich habe ich gehört, dass ein paar Leute denselben Grund wie Ben für die Verwendung von Pink angegeben haben. Ich würde diesem Argument entgegentreten, indem ich frage, für wen Sie Ihre Website entwickeln? Ist es für andere Entwickler oder die Benutzer Ihrer Website? Ich bin mir sicher, dass die meisten Leute eine leuchtend rosa Farbe bei der Textauswahl eher verwirren als unterhalten würden.

Kann mir jemand erklären, warum die Hintergrundfarbe von ::selection überhaupt überschrieben werden muss?

@abittone Weil Sie text-shadow nicht einfach beim Hervorheben entfernen können, ohne dass vorhandene Browser auch die standardmäßige Hervorhebungshintergrundfarbe löschen.

Ich bin hier mit Paul, ich habe noch keine Website gesehen, auf der die pinkfarbene Textauswahl zum Design passt und nicht schockierend erscheint. Gibt es einen bestimmten Grund, warum es von den Browser- / Betriebssystem-Standardeinstellungen geändert wurde, die Benutzer erwarten würden?

Also ::selection { text-shadow: none } funktioniert nicht? Selbst wenn dies der Fall ist, ist dies sicherlich kein ausreichender Grund, die Hintergrundfarbe der Standardauswahl zu ändern?

Variiert die Standardfarbe je nach Browser/Plattform? In diesem Fall _kann_ es sinnvoll sein, eine Hintergrundfarbe bereitzustellen, aber diese Vorgabe sollte eine neutrale, wohlüberlegte Wahl sein.

Ich bin mir nicht einmal sicher, warum dies ein Problem ist.

Wir können nicht die Hände jedes Webentwicklers halten und ihnen sagen, dass sie die Standardstile von allem ändern sollen. Ich denke, das Pink ist eine gute Farbe, um dich daran zu erinnern, oh ja, das solltest du wahrscheinlich ändern.

Aber die Leute ändern es nicht, also versagt es zur Erinnerung. Denken Sie daran, dass die Wirkung dieses Stils nicht sofort ersichtlich ist. Ist es doch besser, eine vernünftige Vorgabe zu haben?

+1 dafür, dass es so bleibt wie es ist. Ändere es, wenn die Farbe Pink dich beleidigt, lass es in Ruhe, wenn nicht.

Fall abgeschlossen.

Wenn die Absicht besteht, sich vom Pink zu entfernen, ist Bildung + das Standardblau wahrscheinlich die beste Wahl. Es gibt keine magische Farbauswahl, die für jede Site "funktioniert". Eine neutralere Farbe sieht auf einigen Websites vielleicht nicht so schlecht aus wie das heiße Pink, aber je näher wir den Geschäftsfarben kommen, desto wahrscheinlicher ist es, dass wir bei ::selection Text verschwinden lassen.

(vergessen hinzuzufügen:)
Persönlich bin ich dafür, es zu verlassen und einen Weg zu finden, die Leute als Designelement darüber aufzuklären, das sie beim Erstellen einer Site berücksichtigen müssen. Es ist besser, die Leute dazu zu bringen, es pro Site zu entwerfen, als ihnen einen weniger schlechten Standard zu geben.

Das Stylesheet ist nicht schreibgeschützt. Ändere es, wenn es dich beleidigt. Mir persönlich gefällt das Rosa.

+1 dafür, dass es so bleibt wie es ist. Die gesamte Boilerplate ist schlüsselfreundlich löschbar. Wenn Ihnen die rosa Textauswahl nicht gefällt, wählen Sie eine andere Farbe oder entfernen Sie einfach die Regel(n) ganz.

Hier geht es sicherlich nicht darum, was Sie „mögen“. Es geht darum, sinnvolle Voreinstellungen in einer Boilerplate zu verwenden.

Ich mag es nicht, die rosa Hervorhebung zu sehen, weil es in 90% der Fälle ein Fehler ist, dass sie drin gelassen wurde oder der Entwickler nicht wusste, wie man sie ändert. Der Boilerplate-Code kann dazu beitragen, die Auswirkungen zu reduzieren, indem er einen geeigneteren und neutraleren Standard verwendet, der das visuelle Design nicht untergräbt.

Ernsthaft? Wenn Sie nicht herausfinden können, wie Sie es von Pink ändern können, sollten Sie es vielleicht nicht verwenden, bevor Sie mehr über CSS erfahren haben?

Pink ist heiß.

Ja, es ist ein Musterbeispiel, um Ihnen den Einstieg zu erleichtern; Warum nicht das Handtuch werfen und eine ganze Vorlage dazulegen!

Ich denke, das Pink fügt etwas Charakter hinzu und ein "Osterei" hebt Entwickler hervor, die ihre Site nicht richtig testen.

Wie ich bereits erwähnt habe, können Sie bei bestehenden Browsern nicht nur text-shadow in ::selection zurücksetzen (dies ist etwas, das sie wahrscheinlich beheben sollten). Hervorgehobener Text kann unordentlich aussehen, wenn er auch Textschatten in bestimmten Farben oder Größen enthält. Wenn Sie also das Text-Schatten-wenn-hervorgehoben-Problem vermeiden möchten, müssen Sie einen ::selection Hintergrund und eine Farbe angeben.

Wenn diejenigen, die dies für ein Problem halten, dazu übergehen könnten, Testfälle zu präsentieren und Alternativen (als Code) vorzuschlagen, wäre das großartig. Im Moment haben wir nichts anderes Konkretes zu bewerten, als das Standardblau neu zu deklarieren, anstatt Pink zu verwenden, da Pink nicht als "neutral" genug angesehen wird.

Ich persönlich finde Blau eine offensive Vorgabe. Für immer rosa.

Hot Pink++

Belassen Sie das Rosa, h5bp sollte nicht geändert werden, nur weil einige die Auswahlfarbe nicht aktualisieren möchten

Hot Pink FTW.

Vielleicht sollte jemand die Boilerplate verzweigen, wobei die einzige Änderung die Standardfarbe ist?

Sieht so aus, als ob diese Leute nicht einverstanden sind, dass die Auswahlfarbe geändert werden sollte:

Naja... das ist geklärt

Ich würde definitiv Blau bevorzugen... -1 für heißes Pink. Es passt nie zu irgendetwas, naja, es sei denn, Sie bauen eine Site mit Lauftext, rosa Text auf gelbem Hintergrund, blinkenden animierten Gifs .... Oh warte, wir verwenden kein HTML4/3 mehr und wir in den 90er Jahren auch nicht.

Möchten Sie uns glauben machen, dass Sie Limettenschwarz nicht bevorzugen?

Als ich das letzte Mal überprüft habe, dass Limeblack keine Farbe ist. Wenn ja, wäre es eine Kreuzung zwischen Himmel und Großartigkeit. :D

Ich weiß nicht , es fühlt sich einfach so an , als ob wir versuchen würden , eine persönliche Note aus der farbenfrohen Vergangenheit zu hinterlassen . Ich meine, abgesehen von einem Unfall, warum sollte jemand Pink wollen?

::-moz-selection { background: #000; color: #0F0; text-shadow: none; }
::selection { background: #000; color: #0F0; text-shadow: none; }

Ich wünschte nur, das funktionierte...

::selection { background: linear-gradient(left, #0f0 0%,#000 100%); color: #fff; text-shadow: none; }

Dann hätten wir Limettenschwarz

Die andere Person zu sein, die das Problem zusammen mit Paul angesprochen hat. Endlich bin ich dazu gekommen, meine Kommentare zu hinterlassen.

Mein Problem ist nicht die Farbwahl. Mein Problem ist die Faulheit der Leute, die die Boilerplate verwenden und die Farbe nicht bearbeiten, damit sie zum Rest der Site passt. Sicherlich möchten Sie, dass es mit dem Rest Ihrer Site verbunden ist, oder?

Meine Bitte ist einfach. Fügen Sie über/unter dieser CSS-Zeile einen Kommentar hinzu, der die Leute daran erinnert, dass er geändert werden sollte/könnte, damit er zum 'Design' der Site passt. Wie das 'Vergiss nicht, die Gliederung neu zu definieren', das du in einer CSS-Reset-Datei bekommst.

Dies würde hoffentlich verhindern, dass der Designer/Entwickler faul ist und Code nur wörtlich ausschneidet und einfügt.

Danke Stu, das halte ich für eine vollkommen vernünftige Idee.

Tatsächlich haben sich spätere Versionen von Eric Meyer-Reset tatsächlich davon entfernt, _nur_ einen Kommentar hinzuzufügen. Hier sind Erics Gedanken zum Beibehalten des Standardwerts für die :focus-Regel:

…das Definieren eines unsichtbaren Fokus war der größte Fehler des ursprünglichen Resets. Im Nachhinein ist es wirklich ein offensichtlicher, nicht erzwungener Fehler, aber als ich den Reset veröffentlichte, hatte ich buchstäblich keine Ahnung, dass er einfach blind in tausend Sites und Frameworks kopiert (oder, schlimmer noch, hotlinked) werden würde. Ich habe direkt im Stylesheet gesagt, dass man einen Fokusstil definieren sollte… indem man alles auf eine „einfache Grundlinie“ bringt, wird der nachdenkliche Handwerker daran erinnert, den Fokusstil zu definieren, der für das Design seiner Site am sinnvollsten ist. Stattdessen wurden Fokusumrisse massenhaft ausgelöscht, da viele, viele Leute, nicht alle Handwerker, einfach den Reset kopierten und darauf bauten, ohne darüber nachzudenken.

In der neuesten Version des Resets verwendet Eric die folgende Notation, kommentiert die gesamte Regel und verwendet ????? als Platzhalter, der ersetzt werden kann:

/* remember to define visible focus styles! 
:focus {
    outline: ?????;
} */

Vielleicht kann hier der gleiche Ansatz verwendet werden?

Die ursprüngliche Entfernung von outline beim Zurücksetzen von Eric Meyer war destruktiv, da sie erhebliche Zugänglichkeitsprobleme mit sich brachte (ein Fehler beim Zurücksetzen der Standardeinstellungen). Die Verwendung einer anderen Farbe für den ::selection Hintergrund hat dieses Problem nicht.

Die ::selection-Farbdeklaration sollte IMO vermieden werden. Es tötet inaktives Fenster-Styling (http://css-tricks.com/9288-window-inactive-styling/), was allein schon ein Grund ist.

Ja, das kennen wir. Es ist jedoch sehr wahrscheinlich, dass das Problem des Textschattens bei der Hervorhebung für Benutzer ein größeres Problem darstellt als das inaktive Auswahl-Styling. Für mich besteht das Problem darin, dass das Gleichgewicht zwischen der standardmäßigen Aufnahme dieser Option, auch wenn es keine Verwendung von text-shadow auf der Site gibt (um Benutzer zu speichern, bei denen Textschatten auf einer Site vorhanden sind), oder dem Verschieben es, um es "besser zu machen".

Es ist erwähnenswert, dass dies seit einiger Zeit in der Boilerplate (und in freier Wildbahn) vorhanden ist und der einzige Grund für ein Problem darin besteht, dass ich es erstellt habe. Es ist also wahrscheinlich keine große Sache.

"Hervorgehobener Text kann chaotisch aussehen, wenn er auch Textschatten in bestimmten Farben oder Größen hat. Wenn Sie also das Text-Schatten-wenn-hervorgehoben-Problem vermeiden möchten, müssen Sie einen ::Auswahlhintergrund und eine Farbe angeben."

Nun, wir können die Leute nicht davon abhalten, schlechte Designentscheidungen zu treffen. text-shadow sollte meistens nicht für den Fließtext verwendet werden.

Wenn Sie diesen Weg dennoch gehen möchten, würde ich vorschlagen, die Standardfarbe des Browsers zu verwenden.

Mein Denken im CSS wie zuvor erwähnt würde jedoch ungefähr so ​​​​aussehen

/_-- Denken Sie daran, diese Farbe an Ihr Design anzupassen --_/

Erstens: +1, um es drin zu lassen.

Der Rest meines Kommentars richtet sich hauptsächlich an Leute, die das Thema angesprochen haben (also

Niemand kann beurteilen, welche Farbe die richtige Farbe für die Auswahlhervorhebung ist. Wenn diese Diskussion berechtigt ist, kann man darüber diskutieren, dass wir auch die "ideale" Farbe für Anker-Tags (eine separate Dose Würmer) diskutieren sollten.

Der Punkt ist: Dies ist völlig designabhängig und _sollte_ vom Designer gepflegt/aktualisiert werden, genau wie Anker-Tags.

Ich liebe Pink! Aber für alle, die es hassen, fügen Sie bitte diese Regeln am Ende Ihrer CSS-Datei hinzu und aktualisieren Sie sie:

::-moz-selection { background: #fe57a1; color: #fff; }
::selection { background: #fe57a1; color: #fff; }

Ich habe das Problem nur im Namen von Paul Lloyd protokolliert.

Aber die Diskussion ist vollkommen berechtigt. Die Standardfarben für Boilerplate-Links _sind_ tatsächlich normalisiert worden, um den modernen Browser-Standards zu entsprechen.

@sturobson Ich habe einen Kommentar in dieser Richtung hinzugefügt: https://github.com/paulirish/html5-boilerplate/blob/master/css/style.css#L42

Ich erwarte, dass die Hinzufügung dieses Kommentars keine Auswirkungen hat, aber zumindest ist es ein Schritt in die richtige Richtung. Danke, dass du dieses Problem weiterverfolgst, Nicolas.

Die Standardfarben für Boilerplate-Links wurden tatsächlich normalisiert, um sie an die Standardeinstellungen moderner Browser anzupassen.

Da stellt sich die Frage, warum die Auswahlfarbe nicht auf die gleiche Weise normalisiert wird? Die Art und Weise, wie Pink als eine Art „Ehrenzeichen“ getragen wird, ist ein ziemlich trauriger Zustand.

und.... Szene!

Ich habe wahrscheinlich 80 Stunden meines Lebens verloren, indem ich es wieder in Pink verwandelt habe.

Jedes Mal muss ich diesen Thread finden, um den Farbcode zu erhalten.

Es ist mir egal, warum ich es nicht einstellen sollte, die Auswahl wird immer pink sein!

@innovandrew Daumen hoch!