Mengapa Twitter Bootstrap Menggunakan Piksel untuk Ukuran Font?

Jawaban:

129

Yah sepertinya mereka bersembunyi di balik alasan zoom browser . Sangat menyedihkan melihat kerangka kerja yang banyak digunakan dan berpengaruh seperti itu sepenuhnya mengabaikan masalah aksesibilitas dan landasan mendasar dari desain responsif. Mereka berada dalam posisi dengan tanggung jawab besar dan sayangnya tampaknya tidak memiliki niat untuk bertindak sesuai dengan itu.

[Pembaruan] Jadi hari ini Mark Otto menjawab di utas yang saya rujuk di atas. Bisa ditebak tidak ada penyebutan aksesibilitas dan penggunaan frase 'pixel-perfect':

Oke, jadi inilah sedikit latar belakang tentang keputusan di masa lalu dan rencana untuk bergerak maju.

Piksel memberikan kontrol mutlak dan rendering yang konsisten di setiap browser.

Desainer kebanyakan masih berpikir dan beroperasi dalam piksel.

Browser meningkatkan seluruh halaman hari ini, jadi ini bukan masalah dengan penskalaan jenis atau apa pun.

Menyarangkan ems secara historis sangat merepotkan dan dapat memerlukan matematika tambahan untuk nilai piksel yang dihitung / diinginkan.

Unit pengukuran pencampuran itu jelek dan OCD batin saya membencinya. Menggunakan satuan pada ketinggian baris umumnya tidak disarankan, tetapi memberikan pengetahuan langsung tentang nilai yang dihitung. Kami mungkin akan mencoba menghindari ini di masa depan. Di masa mendatang, kami mungkin akan menggunakan ems untuk ukuran jenis, bahkan mungkin rem, tetapi tidak untuk hal lain. Ini juga bisa diperdebatkan pada ukuran font untuk input dan sejenisnya. Ini bukan cara orang membuat situs dengan piksel sempurna.

Itu sudah selesai dan mudah-mudahan cukup koheren. Saya akan mencoba untuk blog tentang perubahan ini saat mereka muncul lebih banyak, tetapi saya tidak yakin seberapa dekat 3.0 dan apa yang akan mencakup semua itu.

Saya akan menyarankan siapa pun yang memiliki perasaan kuat tentang perjalanan ini dan memberi +1 pada utas ini .

[Update] Roadmap V3 yang beredar di blogpost rilis V2.3 tidak menyebutkan tentang penambahan dukungan untuk ems.

[Pembaruan] Banyak informasi lebih lanjut tentang Bootstrap V3 tersedia di permintaan tarik di sini termasuk yang berikut dari Mark Otto:

Kami menjelajahi penggunaan unit rem melalui piksel, tetapi menemukan sedikit manfaat untuk mengimbangi implikasi penggunaannya. IE8 masih membutuhkan penggantian piksel, dan itu adalah banyak baris kode duplikat. Selain itu, menggunakan rem di mana-mana alih-alih piksel akan memperburuk masalah itu. Mencampur rem dan piksel sepertinya tidak masuk akal saat ini. Namun, kami dapat dan akan terus mengevaluasi ini di rilis mendatang.

Kemudian baru-baru ini (dalam komentarnya):

Saya sangat ragu kami akan pengiriman dengan rem pada saat ini. Mengubah segalanya — di luar ukuran font — adalah tugas yang sangat besar dan memiliki sedikit manfaat untuk mengimbanginya. Gandakan baris kode untuk ukuran font samping, mendukung rem dengan cara lain tampaknya membosankan. Karena itu, kami selalu dapat mengunjungi kembali di rilis mendatang. Untuk saat ini, kami menggunakan piksel.

Setelah merasa tidak puas dengan sejumlah besar fitur Bootstrap, yang tidak kalah pentingnya adalah kurangnya dukungan em, saya sangat menyarankan untuk melihat Susy jika Anda hanya ingin grid, atau Zurb Foundation 4 untuk seluruh enchilada. Jangan biarkan popularitas Bootstrap mengaburkan penilaian Anda. Siapa pun dapat membangun sesuatu dengan Bootstrap, itulah masalahnya - ini dirancang untuk orang-orang dengan pengalaman web minimal. Hanya karena ada banyak McDonalds di dunia, bukan berarti ini adalah tempat makan yang sehat.

[Edit] Oke. Ini adalah hal yang konyol untuk dikatakan. Sejak saya menulis ini, saya telah menggunakan BS3 dan telah meningkatkan permainannya secara signifikan. Saya seharusnya tidak membuat komentar sekali pakai, tetapi saya masih percaya bahwa itu telah membuat keputusan yang buruk dalam menggunakan piksel untuk ukuran font. Selain masalah aksesibilitas, ems berguna dalam hal lain.

[Pembaruan] Sepertinya rem akan didukung di V4 (Mdo dikutip dari sini ):

Bagi mereka yang mengikuti, kami akan dapat mengubah dari piksel ke REM di v4 saat kami melepaskan dukungan IE8. Tidak bisa berbuat banyak sampai saat itu.

[Perbarui Feb '17] Bootstrap 4 masih dalam versi Alfa, tetapi menunjukkan penggunaan rem dalam dokumen Tipografi , tetapi tidak menunjukkan penggunaan rem dalam dokumen tata letaknya .

Tidak ada gangguan
sumber
4
Masalahnya adalah sepertinya tidak ada seorang pun di sini yang menjelaskan mengapa lebih "ramah aksesibilitas" untuk menggunakan EM lebih dari PX. Maksud saya ok, di atas kertas terlihat jelas, tapi dalam kehidupan nyata? Apakah ada yang punya contoh NYATA pengguna yang terjebak di situs web berbasis piksel? Dengan statistik nyata dan masalah nyata yang disebabkan oleh piksel? Inilah pertanyaan sebenarnya dalam debat ini menurut saya. Kurangnya bukti adalah alasan mengapa kebanyakan orang menggunakan PX.
adriendenat
7
Level sistem operasi dan font level browser ditingkatkan oleh mereka yang memiliki masalah penglihatan. emdiperlukan untuk orang-orang seperti itu, maka "aksesibilitas".
Steven Vachon
1
Ada diskusi di sini yang menjelaskan mengapa peningkatan ukuran font lebih baik daripada zoom, webaim.org/discussion/mail_thread?thread=5849 "Saya berbicara dengan seseorang di CSUN tahun lalu yang menunjukkan bahwa memperbesar keseluruhan halaman tidak terlalu membantu kepadanya. Dia memiliki penglihatan yang sangat buruk dan dia perlu meningkatkan ukuran teks pada halaman secara signifikan untuk membacanya. Namun, saat Anda menggunakan zoom halaman, Anda harus menggulir ke kiri dan kanan untuk membacanya. membaca teks dan itu menjadi tua dengan sangat cepat. Sangat mudah kehilangan tempat ketika Anda harus melakukannya. "
tony
4
Ukuran berbasis Em juga merupakan bagian integral dari pengembangan seluler. Produsen perangkat menghabiskan uang dan waktu untuk menentukan ukuran font dasar yang optimal untuk keterbacaan di perangkat mereka. Kami membatalkan semua penelitian itu dengan mengatakan "font-size: 14px". Apa artinya di UltraAwesomeRetina3.0? ? Atau pada layar 52" dengan pixel per inci lebih rendah Meninggalkan ukuran font dasar sampai ke pabrik adalah praktek terbaik, polos dan sederhana. Filamentgroup.com/lab/... blog.cloudfour.com/...
Jay Dansand
3
Karena saya (sebut saja) fanatik EM, saya suka fakta Anda terus memperbarui jawaban ini… dan bahkan lebih lagi karena Anda menunjuk ke alternatif. +1 ;)
e-sushi
11

Jangan biarkan popularitas Bootstrap mengaburkan penilaian Anda. Siapa pun dapat membangun sesuatu dengan Bootstrap, itulah masalahnya - ini dirancang untuk orang-orang dengan pengalaman web minimal. Hanya karena ada banyak McDonalds di dunia, bukan berarti ini adalah tempat makan yang sehat.

Anda dapat membantah untuk tidak membiarkannya mengaburkan penilaian Anda dengan cara yang negatif. Ini adalah kerangka kerja yang solid dan jika Anda repot-repot menginvestasikan waktu untuk bagaimana menggunakannya secara efektif, sebagian besar argumen Anda akan berada di kepalanya.

Meskipun sering digunakan oleh orang-orang dengan pengalaman minimal - dan tidak ada yang salah dengan itu - ini juga digunakan oleh orang-orang dengan banyak pengalaman.

Setidaknya, ini adalah alat pembuatan prototipe yang sangat berharga. Paling-paling, itu sepenuhnya dapat disesuaikan. Anda dapat memilih, memodifikasi, menambah - itulah sebabnya ini disebut 'kerangka kerja'.

Saya telah menggunakannya secara efektif pada beberapa proyek saya selama lebih dari dua tahun - sesingkat yang Anda inginkan. Saya hanya menggunakan kerangka formulir, hanya kisi-kisi, seluruh basis kode dan menyesuaikannya dengan kebutuhan saya. Dalam banyak hal, ini 'meningkatkan' permainan saya, membawa saya lebih jauh ke dalam pemrosesan awal, menggunakan variabel, mengasah cara saya menyusun proyek.

Ya, ada beberapa masalah. pxuntuk ukuran font dan menggunakan Less adalah dua. Namun, karena sepenuhnya open source, Anda dapat menemukan opsi untuk memperbaiki keduanya dengan mudah.

Saya menyelidiki Foundation dan menyukai apa yang saya lihat, tetapi saya dalam posisi yang tidak menguntungkan karena harus mendukung IE8, seperti halnya banyak pengembang. Foundation telah menghentikan dukungan untuk IE8, menjadikannya 'tidak bisa' bagi saya. Meskipun demikian, saya tidak akan mengabaikan keseluruhan kerangka kerja, terutama sesuatu yang gratis untuk digunakan dan bebas untuk dimodifikasi hanya berdasarkan beberapa masalah!

Heck, dalam satu proyek, saya mengangkat bagian Foundation dan bagian dari Bootstrap dan menambahkan kode kustom saya sendiri - itulah keindahan open source.

Matthew Trow
sumber
6
Itu benar-benar cukup adil dan jujur, dengan Bootstrap 3, saya pikir itu benar-benar meningkatkan permainannya. Dalam retrospeksi, itu adalah hal yang agak konyol untuk dikatakan, tetapi itu lahir dari rasa frustrasi dan saya masih berpikir sebagian besar situs yang saya lihat menggunakan Bootstrap menggunakannya dengan sangat malas. Ini adalah alat yang hebat untuk membuat prototipe dan untuk halaman non-publik yang terbuka - area admin dll. Ini juga bisa menjadi alat yang hebat untuk situs yang berhubungan dengan publik jika orang yang menggunakannya memahami bagaimana gaya di luar standarnya. Seperti alat lainnya, alat ini mudah disalahgunakan, dan menurut saya kemudahan penggunaan itulah yang menyebabkan jumlah penggunaan (ab).
gangguan pada
2
Ya, saya mendengar Anda - kadang-kadang Anda begitu marah dengan pengkodean, Anda menyerang :) Setidaknya, dengan bootstrap 3.0, ketika disalahgunakan, ada beberapa standar yang berlaku. Hal yang sama berlaku untuk Foundation. Ada banyak hal yang bisa dipelajari dari keduanya. Pada akhirnya, mengingat waktu, 'memutar milik Anda sendiri' adalah jalan ke depan.
Matthew Trow
2
Memposting jawaban untuk mengomentari jawaban lain agak membingungkan… (hanya mengatakan)
e-sushi
Senang melihat keseimbangan yang dibawa untuk ini :) Bootstrap bekerja dengan baik untuk banyak orang, berpengalaman dan pemula.
Aaria Carter-Weir
Ini tidak menjawab pertanyaan itu.
Greg Schmit
6

Jika Anda masih lebih suka Bootstrap dengan dukungan em dan rem, Anda dapat melihat ini - https://github.com/ivayloc/twbs-rem-em tidak perlu melakukan perhitungan apa pun untuk mengonversi piksel dalam unit rem atau em, ada build @mixinsuntuk ini - @include rem(property, values)- juga fallback ke px dan untuk konversi em yang dapat Anda gunakan em(value).

ivayloc.dll
sumber
Saya tidak lagi menggunakan TBS karena saya telah menemukan Foundation untuk dipikirkan dengan lebih baik, namun ini terlihat seperti kompromi yang baik.
gangguan
1

Sementara saya menggunakan Bootstrap secara ekstensif, ada beberapa area di mana aksesibilitas mengambil alih pembakar belakang. Saya kira ada trade-off yang tak terelakkan dengan platform yang digunakan secara luas.

Saya benar-benar mengerti mengapa mereka memilih untuk mempertahankan piksel untuk ukuran font. Masalah warisan dengan em untuk font kerangka kerja adalah mimpi buruk total.

rem adalah opsi alternatif, tetapi dukungan browser masih bermasalah.

Anda dapat membuat rems mixin Anda sendiri dan mengganti setiap baris less yang menggunakan variabel ukuran font dasar.

Itulah keindahan bootstrap - dan kerangka kerja seperti itu - ini adalah dasar yang kokoh untuk bekerja.

Ya, saya telah menyebutkan ada elemen untuk bootstrap twitter yang tidak dapat diakses - satu contoh kecil, penggunaan 'display: none' daripada menggunakan klip. Saya sangat yakin ada alasan yang valid untuk ini - dan sekali lagi, Anda dapat dengan mudah memodifikasi ini jika Anda mau.

Bootstrap bukanlah tanpa cela, tapi kemudian, saya ragu itu dimaksudkan sebagai jawaban akhir untuk semua kebutuhan Anda. Ini adalah basis - 'bootstrap' - pelajari dan manfaatkan dengan benar, tambahkan, campur semuanya - paling tidak, ini adalah kerangka kerja yang luar biasa untuk dijadikan prototipe, atau untuk membuat situs cepat. Lebih jauh lagi, ada beberapa dasar yang sangat kuat di dalamnya yang dapat diterapkan ke situs web apa pun .

pengguna2584840
sumber
1
Saya rasa salah satu ironi dari Bootstrap adalah ia melakukan lebih dari sekedar 'bootstrap' aplikasi Anda. Ini bersifat preskriptif pada banyak level, tidak terkecuali adalah tata letak. Terlepas dari kemalasan, alasan mengapa begitu banyak situs jelas berbasis bootstrap adalah karena tidak mudah untuk melepaskan diri dari default. Ya, ada beberapa variabel untuk menyesuaikan aspek, tetapi masalah spesifisitas yang mengerikan membuat pengesampingan aspek lain menjadi sangat memusingkan. Mungkin Bootstrap 3 akan lebih baik. Secara pribadi, saya menyukai Foundation 4. Itu membuat saya merasa bahwa sayalah yang bertanggung jawab daripada kerangka kerjanya.
gangguan
0

Saya pikir, ini karena pendekatan pertama desktop. Twitter Bootstrap ramah responsif, tetapi pendekatan "degradasi anggun".

gocsp
sumber