Html5-boilerplate: :: اختيار لون الخلفية الافتراضي

أحب تحديد النص على موقع الويب ورؤيته باللون الوردي الزاهي ومعرفة أنهم يستخدمون النموذج المعياري.

أصوت أنه يبقى ورديًا ساخنًا ؛ إذا كان هناك أي شيء يشجع الناس على تغييره ، إذا كان اللون الأزرق الافتراضي فقط ، فلن يلاحظه الجميع ويتركه فقط ، فسنحصل على مواقع مملة مرة أخرى.

شكرا لك على إيداع هذه القضية نيكولاس.

أعتقد أن اللون الوردي الساخن هو خيار سيئ لاختيار النص لأنه واضح جدًا ، وغالبًا ما لا يتناسب مع تصميم العديد من مواقع الويب - قد يكون اختيار النص في المواقع التي لم يتم فيها تغيير هذه القيمة أمرًا مثيرًا للانزعاج. أشجع على استخدام لون أكثر حيادية ؛ عادة ما يكون البلوز أو الرمادي خيارات جيدة ، ولكن ربما قد يكون اللون الأصفر الباهت مفيدًا أيضًا.

أعتقد أن هذا يتعلق بالمسألة الأساسية المتمثلة في عدم دراسة الأشخاص لمحتويات النموذج المعياري واستخدامها بالجملة دون التخصيص. قد تكون هناك حدود لمقدار ما يمكنك من تشجيع الناس على أن يكونوا أقل كسلاً (وربما يتعارض هذا مع روح النموذج المعياري) لكني أرغب في رؤية المزيد من التواصل حول تخصيص الملفات وتكييفها. ربما يجب تقديم ذلك في قضية مختلفة ؛-)

أخيرًا ، سمعت أن بعض الأشخاص يقدمون نفس السبب الذي استخدمه بن لاستخدام اللون الوردي الفاتح. كنت سأواجه هذه الحجة بالسؤال لمن تقوم بتطوير موقع الويب الخاص بك؟ هل هو للمطورين الآخرين أو لمستخدمي موقع الويب الخاص بك؟ أنا متأكد من أن معظم الأشخاص الذين يرون اللون الوردي الفاتح عند اختيار النص من شأنه أن يربكهم بدلاً من الترفيه عنهم.

هل يمكن لشخص ما أن يشرح لماذا يحتاج لون الخلفية ::selection حتى إلى تجاوزه في المقام الأول؟

abitgone لأنه لا يمكنك ببساطة إزالة text-shadow عند التمييز بدون المتصفحات الحالية التي تقتل أيضًا لون الخلفية الافتراضي.

أنا مع Paul هنا ، لم أر بعد موقعًا على شبكة الإنترنت حيث يتناسب اختيار النص الوردي الساخن مع التصميم ولا يبدو صادمًا. هل هناك أي سبب معين لتغييره من المتصفح / نظام التشغيل الافتراضي الذي يتوقعه المستخدمون؟

إذن ، ::selection { text-shadow: none } لا يعمل؟ حتى لو كان الأمر كذلك ، فمن المؤكد أن هذا ليس سببًا قويًا بدرجة كافية لتغيير لون خلفية التحديد الافتراضي؟

هل يختلف اللون الافتراضي عبر المتصفحات / الأنظمة الأساسية؟ في هذه الحالة ، قد يكون هناك سبب لتوفير لون للخلفية ، ولكن يجب أن يكون هذا الخيار الافتراضي محايدًا ومدروسًا.

لست متأكدًا حتى من سبب هذه المشكلة.

لا يمكننا إمساك أيدي كل مطور ويب ونطلب منهم تغيير الأنماط الافتراضية لكل شيء. أعتقد أن اللون الوردي هو لون جيد لتذكيرك ، نعم ، ربما يجب عليك تغيير ذلك.

ومع ذلك ، فإن الناس لا يغيرونها ، لذا فالتذكير يفشل. ضع في اعتبارك أن تأثير هذا الأسلوب ليس واضحًا على الفور. من الأفضل أن يكون لديك تقصير معقول ، بالتأكيد؟

+1 لتركه كما هو. قم بتغييره إذا كان اللون الوردي يزعجك ، اتركه بمفرده إذا لم يكن كذلك.

القضية مغلقة.

إذا كان القصد هو الابتعاد عن اللون الوردي الساخن ، فمن المحتمل أن يكون التعليم + الأزرق الافتراضي هو أفضل رهان. لا يوجد خيار لون سحري "يعمل" لكل موقع. قد لا يبدو اللون الأكثر حيادية سيئًا مثل اللون الوردي الساخن في بعض المواقع ، ولكن كلما اقتربنا من ألوان العمل ، زادت احتمالية إنشاء نص يختفي عند التحديد.

(نسيت أن أضيف :)
أنا شخصياً أتركه وأجد طريقة ما لتثقيف الناس به كعنصر تصميم يحتاجون إلى مراعاته عند بناء موقع. جعل الناس يصممونه على أساس كل موقع أفضل من منحهم تقصيرًا أقل سوءًا.

ورقة الأنماط ليست للقراءة فقط. قم بتغييره إذا كان يزعجك. أنا شخصياً أحب اللون الوردي.

+1 لتركه كما هو. برنامج Boilerplate بأكمله هو حذف مفتاح سهل. إذا لم يعجبك تحديد النص الوردي ، فاختر لونًا مختلفًا ، أو قم بإزالة القاعدة (القواعد) تمامًا.

لا يتعلق الأمر بما تحب بالتأكيد. يتعلق الأمر باستخدام القيم الافتراضية المعقولة في نموذج معياري.

لا أحب رؤية التظليل باللون الوردي لأن 90٪ من الوقت يكون من الخطأ تركه هناك ، أو أن المطور لم يعرف كيفية تغييره. يمكن أن يساعد الكود المعياري في تقليل تأثير ذلك باستخدام خيار افتراضي أكثر ملاءمة وحيادية ، والذي لا يقوض التصميم المرئي.

عنجد؟ إذا لم تتمكن من معرفة كيفية تغييره من اللون الوردي ... فربما لا يجب عليك استخدامه قبل معرفة المزيد عن Css؟

الوردي حار شرير.

نعم ، إنها نموذج معياري لتبدأ ؛ لماذا لا ترمي المنشفة وتضمين قالب كامل معها!

أعتقد أن اللون الوردي الفاتح يضيف بعض السمات و "بيضة عيد الفصح" التي تسلط الضوء على المطورين الذين لا يختبرون مواقعهم بشكل صحيح.

كما ذكرت من قبل ، لا تسمح لك المتصفحات الحالية بإعادة تعيين text-shadow في ::selection (هذا شيء يجب إصلاحه على الأرجح). يمكن أن يبدو النص المميز في حالة من الفوضى إذا كان يحتوي أيضًا على ظلال نصية بألوان أو أحجام معينة. لذلك إذا كنت ترغب في تجنب مشكلة ظل النص عند تمييزه ، فعليك الإعلان عن خلفية ولون ::selection .

إذا كان بإمكان أولئك الذين يعتقدون أن هذه مشكلة أن يتحركوا نحو تقديم حالات الاختبار واقتراح البدائل (كرمز) ، فسيكون ذلك رائعًا. في الوقت الحالي ، ليس لدينا أي شيء ملموس آخر لتقييمه بخلاف إعادة تعريف اللون الأزرق الافتراضي بدلاً من استخدام اللون الوردي الساخن لأن اللون الوردي لا يعتبر "محايدًا" بدرجة كافية.

أنا شخصياً أجد اللون الأزرق بمثابة تقصير هجومي. وردي إلى الأبد.

Hot Pink++

اترك اللون الوردي ، لا ينبغي تغيير h5bp لمجرد أن البعض يختار عدم تحديث لون التحديد

Hot Pink FTW.

ربما يجب على شخص ما أن يقوم بتشكيل النموذج المعياري ، حيث يكون التغيير الوحيد هو اللون المحدد الافتراضي؟

يبدو أن هؤلاء الرجال لا يوافقون على ضرورة تغيير لون التحديد:

حسنًا ... تمت تسوية هذا الأمر

أنا بالتأكيد أفضل الأزرق ... -1 للوردي الساخن. إنه لا ينطبق أبدًا على أي شيء ، حسنًا ما لم تقم ببناء موقع بنص تمرير ، ونص وردي على خلفية صفراء ، وصور متحركة وامضة ... أوه انتظر لم نكن نستخدم HTML4 / 3 بعد الآن ولا نحن في التسعينيات.

هل تريد منا أن نصدق أنك لا تفضل أسود غير لامع؟

آخر مرة تحققت من أن الأسود ليس لونًا. إذا كان الأمر كذلك ، فسيكون صليبًا بين السماء والذهول. :د

لا أعلم أنه يشعر وكأننا نحاول ترك لمسة شخصية من الماضي الملون . أعني بخلاف كونه حادثًا ، فلماذا يريد شخص ما اللون الوردي؟

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

أنا فقط أتمنى أن يعمل هذا ...

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

ثم سيكون لدينا الجير الأسود

كونك الشخص الآخر الذي أثار المشكلة مع بول. لقد تمكنت أخيرًا من ترك تعليقاتي.

مشكلتي ليست اختيار اللون. مشكلتي هي كسل الأشخاص الذين يستخدمون النموذج المعياري ولا يعدلون اللون بحيث يتناسب مع بقية الموقع. بالتأكيد تريده أن يرتبط ببقية موقعك ، أليس كذلك؟

طلبي بسيط. أضف تعليقًا أعلى / أسفل هذا السطر من CSS لتذكير الأشخاص بأنه يجب / يمكن تغييره ليلائم "تصميم" الموقع. مثل "لا تنس إعادة تحديد المخطط" الذي ستحصل عليه في ملف إعادة تعيين CSS.

من المأمول أن يمنع هذا المصمم / المطور من أن يكون كسولًا ويقوم فقط بقص ولصق الكود حرفيًا.

شكرًا ستو ، أعتقد أن هذه فكرة معقولة تمامًا.

في الواقع ، انتقلت الإصدارات الأحدث من إعادة تعيين Eric Meyer بالفعل بعيدًا عن إضافة تعليق. إليك أفكار إريك حول ترك القيمة الافتراضية لـ: قاعدة التركيز:

... كان تحديد التركيز غير المرئي هو أكبر خطأ فادح في عملية إعادة الضبط الأصلية. في الإدراك المتأخر ، إنه حقًا خطأ غير قسري واضح ، لكن عندما قمت بنشر إعادة التعيين ، لم يكن لدي أي تصور أنه سيتم نسخه (أو الأسوأ من ذلك ، الارتباط الساخن) بشكل أعمى في ألف موقع وإطار. لقد قلت في ورقة الأنماط أنه يجب على المرء تحديد نمط التركيز ... من خلال أخذ كل شيء إلى "خط أساسي عادي" ، سيتم تذكير الحرفي المدروس لتحديد أسلوب التركيز الأكثر منطقية لتصميم موقعهم. بدلاً من ذلك ، تم طمس الخطوط العريضة للتركيز بالجملة حيث قام الكثير والكثير من الأشخاص ، وليس كلهم ​​حرفيون ، بنسخ إعادة الضبط والبناء فوقها دون التفكير في الأمر.

في أحدث إصدار من إعادة الضبط ، يستخدم Eric التدوين التالي ، ويعلق على القاعدة بأكملها ويستخدم ؟؟؟؟؟ كعنصر نائب يمكن استبداله:

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

ربما يمكن استخدام نفس النهج هنا؟

كانت الإزالة الأصلية لـ outline في إعادة تعيين Eric Meyer مدمرة لأنها أحدثت مشكلات كبيرة في إمكانية الوصول (فشل إعادة التعيين الافتراضي). لا يؤدي استخدام لون مختلف للخلفية ::selection إلى هذه المشكلة.

يجب تجنب :: إعلان لون التحديد IMO. إنه يقتل التصميم غير النشط للنافذة (http://css-tricks.com/9288-window-inactive-styling/) ، وهو بالفعل سبب بحد ذاته.

نعم نحن نعلم هذا. لكن من المحتمل جدًا أن مشكلة ظل النص في التمييز مشكلة أكبر للمستخدمين من تصميم التحديد غير النشط. بالنسبة لي ، تكمن المشكلة في الموازنة بين تضمين هذا بشكل افتراضي ، حتى إذا لم يكن هناك استخدام text-shadow في الموقع (من أجل حفظ المستخدمين حيث يوجد ظل نص على الموقع) ، أو نقل من أجل "جعله أفضل".

تجدر الإشارة إلى أن هذا كان موجودًا في النموذج المعياري (وفي البرية) لبعض الوقت والسبب الوحيد لوجود مشكلة هو أنني قمت بإنشائها. لذلك ، من المحتمل ألا تكون صفقة ضخمة في كلتا الحالتين.

"يمكن أن يبدو النص المميز في حالة من الفوضى إذا كان يحتوي أيضًا على ظلال نصية بألوان أو أحجام معينة. لذلك إذا كنت تريد تجنب مشكلة ظل النص عند تمييزه ، فعليك إعلان :: خلفية ولون التحديد."

حسنًا ، لا يمكننا منع الناس من اتخاذ قرارات تصميم سيئة. text-shadow أغلب الأحيان لنسخ الجسم.

على الرغم من أنك إذا كنت لا تزال ترغب في السير في هذا الطريق ، فأنا أقترح استخدام اللون الافتراضي للمتصفح.

سيبدو تفكيري في CSS كما ذكرنا سابقًا شيئًا كهذا

/ _-- تذكر تغيير هذا اللون ليناسب تصميمك --_ /

الأول: +1 لتركه فيه.

بقية تعليقي مخصص بشكل أساسي للأشخاص الذين طرحوا المشكلة (لذلك سيكون necolas وsturobson):

لا يمكن لأحد أن يحكم على اللون الصحيح لإبراز التحديد. إذا كانت هذه المناقشة صحيحة ، فيمكن للمرء أن يناقش أنه يجب علينا أيضًا مناقشة اللون "المثالي" لعلامات الربط (علبة منفصلة من الديدان).

النقطة المهمة هي: هذا شيء يعتمد تمامًا على التصميم و _يجب_ أن يتم صيانته / تحديثه بواسطة المصمم ، تمامًا مثل علامات الارتساء.

أنا أحب الوردي الساخن! ولكن بالنسبة لأي شخص يكره ذلك ، يرجى إضافة هذه القواعد وتحديثها في الجزء السفلي من ملف CSS الخاص بك:

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

لقد سجلت المشكلة فقط نيابة عن بول لويد.

لكن المناقشة صحيحة تماما. ألوان الارتباط المعيارية الافتراضية _have_ تم تطبيعها بالفعل لتتوافق مع الإعدادات الافتراضية للمتصفح الحديث.

sturobson لقد أضفت تعليقًا على طول هذه الأسطر: https://github.com/paulirish/html5-boilerplate/blob/master/css/style.css#L42

أتوقع ألا يكون لإضافة هذا التعليق أي تأثير ، لكنها على الأقل خطوة في الاتجاه الصحيح. شكرا على متابعة هذا الموضوع نيكولاس.

تم بالفعل تسوية ألوان الارتباط المعيارية الافتراضية لتتناسب مع الإعدادات الافتراضية للمتصفح الحديث.

الذي يطرح السؤال ، لماذا لا تطبيع لون التحديد بنفس الطريقة؟ الطريقة التي يتم بها ارتداء اللون الوردي الساخن كنوع من "شارة الشرف" هي حالة حزينة جدًا.

و .... مشهد!

ربما فقدت 80 ساعة من حياتي غيرت هذا إلى اللون الوردي الفاتح.

في كل مرة أجد فيها هذا الموضوع للحصول على رمز اللون.

لا يهمني لماذا لا يجب أن أقوم بإعداده ، فسيكون الاختيار دائمًا ورديًا!

تضمين التغريدة