Html5-boilerplate: :: pilihan warna latar belakang default

Saya suka memilih teks di situs web dan melihatnya berwarna merah jambu panas dan mengetahui mereka menggunakan boilerplate.

Saya memilih itu tetap hot pink; jika ada sesuatu yang lebih merupakan dorongan bagi orang untuk mengubahnya, jika itu hanya default biru maka semua orang tidak akan menyadarinya dan hanya meninggalkannya maka kita akan memiliki situs yang membosankan sekali lagi.

Terima kasih telah mengajukan masalah ini Nicolas.

Saya pikir hot pink adalah pilihan yang buruk untuk pemilihan teks karena sangat jelas, dan seringkali tidak sesuai dengan desain banyak situs web--pemilihan teks di situs di mana nilai ini belum diubah bisa sangat mengejutkan. Saya akan mendorong penggunaan warna yang lebih netral; biru atau abu-abu biasanya merupakan pilihan yang baik, tetapi mungkin juga kuning pucat.

Saya kira ini berkaitan dengan masalah mendasar orang-orang yang tidak mempelajari isi boilerplate dan menggunakannya secara grosir tanpa penyesuaian. Mungkin ada batasan seberapa banyak Anda dapat mendorong orang untuk tidak terlalu malas (dan mungkin ini bertentangan dengan etos boilerplate) tetapi saya ingin melihat lebih banyak komunikasi seputar menyesuaikan dan mengadaptasi file. Mungkin itu perlu diajukan dalam masalah yang berbeda ;-)

Akhirnya, saya mendengar beberapa orang memberikan alasan yang sama seperti Ben menggunakan hot pink. Saya akan melawan argumen ini dengan menanyakan untuk siapa Anda mengembangkan situs web Anda? Apakah untuk pengembang lain, atau pengguna situs web Anda? Saya yakin bagi kebanyakan orang melihat warna pink cerah pada pemilihan teks akan membingungkan daripada menghibur mereka.

Adakah yang bisa menjelaskan mengapa warna latar belakang ::selection bahkan perlu diganti?

@abitgone Karena Anda tidak bisa begitu saja menghapus text-shadow pada sorotan tanpa browser yang ada juga mematikan warna latar belakang sorotan default.

Saya bersama Paul di sini, saya belum pernah melihat situs web di mana pemilihan teks hot pink cocok dengan desain dan tidak tampak mengejutkan. Apakah ada alasan khusus mengapa itu diubah dari browser/OS default yang diharapkan pengguna?

Jadi ::selection { text-shadow: none } tidak berfungsi? Bahkan jika itu masalahnya, tentu itu bukan alasan yang cukup kuat untuk mengubah warna latar belakang pemilihan default?

Apakah warna default bervariasi di seluruh browser/platform? Dalam hal ini, _mungkin_ ada kasus untuk memberikan warna latar belakang, tetapi default itu harus menjadi pilihan yang netral dan dipertimbangkan.

Saya bahkan tidak yakin mengapa ini menjadi masalah.

Kami tidak dapat memegang tangan setiap pengembang web dan memberi tahu mereka untuk mengubah gaya default semuanya. Saya pikir pink adalah warna yang bagus untuk mengingatkan Anda bahwa, oh ya, Anda mungkin harus mengubahnya.

Namun, orang tidak mengubahnya, jadi sebagai pengingat itu gagal. Ingatlah bahwa efek gaya ini tidak langsung terlihat. Jauh lebih baik untuk memiliki default yang masuk akal, tentunya?

+1 untuk membiarkannya apa adanya. Ubah jika warna pink menyinggung perasaan Anda, biarkan saja jika tidak.

Kasus ditutup.

Jika tujuannya adalah untuk menjauh dari hot pink maka pendidikan + biru default mungkin adalah pilihan terbaik. Tidak ada pilihan warna ajaib yang akan "berfungsi" untuk setiap situs. Warna yang lebih netral mungkin tidak terlihat seburuk hot pink di beberapa situs, tetapi semakin dekat kita dengan warna bisnis, semakin besar kemungkinan kita akan membuat teks menghilang pada ::selection.

(lupa menambahkan :)
Secara pribadi saya ingin meninggalkannya dan mencari cara untuk mendidik orang tentangnya sebagai elemen desain yang perlu mereka pertimbangkan saat membangun situs. Membuat orang mendesainnya berdasarkan per situs lebih baik daripada memberi mereka default yang tidak terlalu buruk.

Stylesheet tidak hanya bisa dibaca. Ubah jika itu menyinggung Anda. Secara pribadi, saya suka warna pink.

+1 untuk membiarkannya apa adanya. Seluruh Boilerplate adalah menghapus kunci-ramah. Jika Anda tidak menyukai pemilihan teks merah muda, pilih warna lain, atau hapus aturannya sama sekali.

Ini bukan tentang apa yang Anda 'sukai', tentunya. Ini tentang default yang masuk akal yang digunakan dalam boilerplate.

Saya tidak suka melihat sorotan merah muda karena 90% dari waktu itu adalah kesalahan yang ditinggalkan di sana, atau pengembang tidak tahu bagaimana mengubahnya. Kode boilerplate dapat membantu mengurangi dampak ini dengan menggunakan default yang lebih cocok dan netral, yang tidak merusak desain visual.

Dengan serius? Jika Anda tidak tahu cara mengubahnya dari pink... mungkin sebaiknya Anda tidak menggunakannya sebelum mempelajari lebih lanjut tentang css?

merah muda sangat panas.

Ya itu adalah boilerplate untuk Anda mulai; mengapa tidak membuang handuk dan menyertakan seluruh templat dengannya!

Saya pikir hot pink menambahkan beberapa karakter dan 'telur paskah' yang menyoroti pengembang yang tidak menguji situs mereka dengan benar.

Seperti yang saya sebutkan sebelumnya, browser yang ada tidak mengizinkan Anda mengatur ulang hanya text-shadow di ::selection (ini adalah sesuatu yang mungkin harus mereka perbaiki). Teks yang disorot dapat terlihat berantakan jika juga memiliki bayangan teks dengan warna atau ukuran tertentu. Jadi jika Anda ingin menghindari masalah text-shadow-when-highlighted maka Anda harus mendeklarasikan latar belakang dan warna ::selection .

Jika mereka yang menganggap ini masalah dapat beralih ke penyajian kasus uji dan mengusulkan alternatif (sebagai kode), itu akan bagus. Saat ini, kami tidak memiliki hal lain yang konkret untuk dievaluasi selain mendeklarasikan ulang default biru daripada menggunakan hot pink karena pink tidak dianggap cukup "netral".

Secara pribadi saya menemukan biru menjadi default ofensif. Merah muda selamanya.

Hot Pink++

tinggalkan pink, h5bp tidak boleh diubah hanya karena beberapa memilih untuk tidak memperbarui warna pilihan

FTW merah muda.

Mungkin seseorang harus memotong boilerplate, dengan satu-satunya perubahan adalah warna pilih default?

Sepertinya orang-orang ini tidak setuju warna pilihan harus diubah:

Nah ... itu diselesaikan

Saya pasti lebih suka biru... -1 untuk hot pink. Itu tidak pernah cocok dengan apa pun, kecuali jika Anda membangun situs dengan teks bergulir, teks merah muda dengan latar belakang kuning, gif animasi berkedip....Oh, tunggu, kami tidak lagi menggunakan HTML4/3, kami juga tidak di tahun 1990-an.

Seperti Anda ingin kami percaya bahwa Anda tidak suka limeblack?

Terakhir kali saya memeriksa limeblack bukan warna. Jika ya, itu akan menjadi persilangan antara surga dan kedahsyatan. :D

Entahlah, rasanya seperti kami mencoba meninggalkan sentuhan pribadi dari masa lalu yang penuh warna . Maksud saya selain kecelakaan, mengapa seseorang menginginkan warna pink?

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

Saya hanya berharap ini berhasil ...

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

Maka kita akan memiliki kapur hitam

Menjadi orang lain yang mengangkat masalah ini bersama Paul. Saya akhirnya sempat meninggalkan komentar saya.

Masalah saya bukan pilihan warna. Masalah saya adalah kemalasan orang-orang yang menggunakan boilerplate dan tidak mengedit warnanya agar sesuai dengan sisa situs. Tentunya Anda ingin itu terkait dengan sisa situs Anda, bukan?

Permintaan saya sederhana. Tambahkan komentar di atas/di bawah baris CSS ini untuk mengingatkan orang bahwa CSS harus/dapat diubah agar sesuai dengan 'desain' situs. Seperti 'jangan lupa untuk mendefinisikan ulang garis besar' yang Anda dapatkan pada file reset CSS.

Ini diharapkan akan menghentikan desainer/pengembang menjadi malas dan hanya memotong dan menempelkan kode kata demi kata.

Terima kasih Stu, saya pikir itu ide yang sangat masuk akal.

Sebenarnya, versi reset Eric Meyer yang lebih baru sebenarnya menjauh dari _just_ menambahkan komentar. Inilah pemikiran Eric tentang meninggalkan nilai default untuk aturan :focus:

…mendefinisikan fokus yang tidak terlihat adalah kesalahan terbesar dari reset asli. Di belakang, itu benar-benar kesalahan yang tidak dipaksakan, tetapi ketika saya menerbitkan reset, saya benar-benar tidak memiliki konsepsi bahwa itu hanya akan disalin (atau, lebih buruk, hotlinked) secara membabi buta di seribu situs dan kerangka kerja. Saya memang mengatakan tepat di lembar gaya bahwa seseorang harus mendefinisikan gaya fokus… dengan membawa semuanya ke "garis dasar biasa", pengrajin yang bijaksana akan diingatkan untuk menentukan gaya fokus yang paling masuk akal untuk desain situs mereka. Alih-alih, garis besar fokus dilenyapkan secara grosir karena banyak dan banyak orang, tidak semuanya pengrajin, hanya menyalin reset dan membangun di atasnya tanpa memikirkannya.

Dalam versi terbaru dari reset, Eric menggunakan notasi berikut, mengomentari seluruh aturan dan menggunakan ????? sebagai pengganti yang dapat diganti:

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

Mungkin pendekatan yang sama dapat digunakan di sini?

Penghapusan outline dalam pengaturan ulang Eric Meyer bersifat merusak karena menimbulkan masalah aksesibilitas yang signifikan (kegagalan pengaturan ulang default). Menggunakan warna berbeda untuk latar belakang ::selection tidak masalah.

Deklarasi warna ::selection harus dihindari IMO. Itu membunuh gaya tidak aktif jendela ( http://css-tricks.com/9288-window-inactive-styling/ ), yang sudah menjadi alasan dengan sendirinya.

Ya kita tahu ini. Tetapi kemungkinan besar bahwa masalah bayangan teks dalam penyorotan adalah masalah yang lebih besar bagi pengguna daripada gaya pemilihan yang tidak aktif. Bagi saya, masalahnya adalah di mana keseimbangan antara memasukkan ini secara default, bahkan jika tidak ada text-shadow digunakan di situs (untuk menyelamatkan pengguna di mana ada bayangan teks di situs), atau memindahkan itu untuk 'membuatnya lebih baik'.

Perlu dicatat bahwa ini telah ada di boilerplate (dan di alam liar) untuk beberapa waktu dan satu-satunya alasan ada masalah adalah karena saya membuatnya. Jadi, itu mungkin bukan masalah besar.

"Teks yang disorot dapat terlihat berantakan jika juga memiliki bayangan teks dengan warna atau ukuran tertentu. Jadi jika Anda ingin menghindari masalah teks-bayangan-saat-yang disorot maka Anda harus mendeklarasikan ::pilihan latar belakang dan warna."

Yah, kita tidak bisa mencegah orang melakukan keputusan desain yang buruk. text-shadow , sebagian besar waktu, tidak boleh digunakan untuk body copy.

Meskipun, jika Anda masih ingin menempuh rute itu, saya sarankan menggunakan warna default browser.

Pemikiran saya di CSS seperti yang disebutkan sebelumnya akan terlihat seperti ini

/_-- INGAT untuk mengubah warna ini agar sesuai dengan desain ANDA --_/

Pertama: +1 untuk membiarkannya masuk.

Sisa komentar saya terutama untuk orang-orang yang mengangkat masalah ini (jadi itu adalah @necolas dan @sturobson):

Tidak ada yang bisa menilai apa warna yang benar untuk sorotan seleksi. Jika diskusi ini valid, maka orang dapat memperdebatkan bahwa kita juga harus mendiskusikan warna "ideal" untuk tag jangkar (kaleng cacing terpisah).

Intinya adalah: Ini adalah hal yang sepenuhnya bergantung pada desain dan _harus_ dipertahankan/diperbarui oleh perancang, seperti tag jangkar.

Saya suka merah muda panas! Tapi bagi siapa saja di luar sana yang membencinya, silakan tambahkan dan perbarui aturan ini di bagian bawah file CSS Anda:

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

Saya hanya mencatat masalah atas nama Paul Lloyd.

Tapi diskusi itu benar-benar valid. Warna tautan boilerplate default _have_ sebenarnya telah dinormalisasi agar sesuai dengan default browser modern.

@sturobson Saya telah menambahkan komentar di sepanjang baris itu: https://github.com/paulirish/html5-boilerplate/blob/master/css/style.css#L42

Saya berharap penambahan komentar itu tidak berdampak apa-apa, tetapi setidaknya ini adalah langkah ke arah yang benar. Terima kasih telah menindaklanjuti masalah ini Nicolas.

Warna tautan boilerplate default sebenarnya telah dinormalisasi agar sesuai dengan default browser modern.

Yang menimbulkan pertanyaan, mengapa tidak menormalkan warna seleksi dengan cara yang sama? Cara hot pink dipakai sebagai semacam 'lencana kehormatan' adalah keadaan yang cukup menyedihkan.

dan.... adegan!

Saya mungkin telah kehilangan 80 jam hidup saya mengubah ini kembali menjadi merah muda.

Setiap kali saya harus menemukan utas ini untuk mendapatkan kode warna.

Saya tidak peduli mengapa saya tidak harus mengaturnya, pilihan akan selalu merah muda sialan!

@innovandrew acungan jempol!