✋🏽 🥞 👷 Temuan CSS yang Menarik dalam Desain Twitter 🐂 👩🏾‍🏭 🖕🏻

Sekali lagi, saya ingin memberi tahu Anda tentang hasil studi desain situs yang menarik perhatian saya. Terakhir kali saya menulis tentang mekanisme CSS yang mendasari desain Facebook baru. Dan sekarang saya ingin menjelajahi Twitter CSS. Desain Twitter baru muncul hampir setahun yang lalu. Saya menemukan banyak hal menarik di CSS CSS: sesuatu tampak baik-baik saja bagi saya, dan ada sesuatu yang aneh.

Rasio aspek avatar pengguna

Saya perhatikan implementasi menarik dari avatar pengguna di halaman profil. Implementasi ini menggunakan teknik CSS untuk mempertahankan rasio aspek elemen.

Avatar pengguna di halaman profil

Kode HTML dan CSS berikut menggambarkan penerapan avatar.

<a href="#" class="avatar">
    <div class="avatar-aspect-ratio"></div>
    <img alt="" src="me.jpg">
</a>
.avatar {
  position: relative;
  width: 25%;
  display: block;
}

.avatar-aspect-ratio {
  width: 100%;
  padding-bottom: 100%;
}

.avatar img {
  position: absolute;
  top: 0; 
  right: 0; 
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Teknik melestarikan aspek rasio elemen bekerja karena fakta bahwa ketika elemen memiliki indentasi vertikal (properti padding-bottomatau padding-top), indentasi tergantung pada lebar elemen. Lihatlah contoh berikut:

.element {
    width: 250px;
    padding-bottom: 100%;
}

Nilai yang dihitung padding-bottomsama 250px. Ini berarti bahwa kita memiliki kotak yang sempurna. Tim Twitter menggunakan teknik yang sama, tetapi diterapkan pada elemen <img>yang, dalam kaitannya dengan elemen induk, benar-benar diposisikan. Mengapa? Ini alasannya.

Ada yang salah dengan avatar tersebut.

Ketika gambar tidak diposisikan sepenuhnya, avatar akan terlihat seperti yang ditunjukkan pada gambar sebelumnya. Gambar harus diposisikan menggunakan nilai100%lebar dan tinggi. Dengan pendekatan ini, ukurannya akan diatur sesuai dengan ukuran elemen pembungkus.

Sekarang kita telah menemukan ide di balik solusi ini, mari kita kembali ke bagaimana ide ini diterapkan di Twitter.

Properti iniwidth: 25%didasarkan pada lebar elemen pembungkus. Di layar saya itu -600px. Saya bertanya-tanya mengapa teknik seperti itu dipilih. Setelah saya mempelajari lebih lanjut tentang kode CSS, saya perhatikan bahwa komponen yang sama digunakan di jendela modal Edit Profile. Benar, elemen di sini lebih kecil karena penggunaan gaya berikut:

.avatar {
    max-width: 8rem; /* 112px  150px (25%) */
}

Saya sangat menyukai gagasan mengelola gambar dengan hanya memengaruhi properti width. Ini adalah video yang menggambarkan ide ini.

Kontrol Lebar Gambar

Di sini Anda dapat menemukan proyek demo untuk bagian ini.

Persentase indentasi atas

Agar avatar pengguna tumpang tindih dengan foto yang terletak di bagian atas halaman profil, digunakan indentasi eksternal negatif yang ditentukan dalam persen:

.avatar {
    margin-top: -18%;
}

Benar, di jendela Edit Profile modal, desain sudah digunakan untuk menyesuaikan lekukan atas margin-top: -3rem. Perhatikan bahwa lekukan di jendela modal diatur menggunakan unit rem. Unit yang sama digunakan untuk mengatur properti max-width.

Penggunaan aneh dari fungsi calc () CSS

Saya perhatikan bahwa CSS berikut digunakan untuk menata beberapa tombol:

.button {
    min-width: calc(45.08px)
}

Mengapa fungsi lulus calc()nilai tunggal? Saya tidak mengerti intinya. Mungkin mereka ingin membulatkan angka 45,08? Tetapi dengan pendekatan ini, tidak dibulatkan ke 45. Lebar tombol sangat kecil. Tombol, ketika menerjemahkan aplikasi ke dalam bahasa RTL, seperti bahasa Arab, akan terlalu kecil.

Tombol yang terlalu kecil

Fungsicalc()muncul di CSS sebaris. Oleh karena itu, saya percaya bahwa ini adalah hasil dari penataan dinamis tombol menggunakan React.

Campur latar belakang CSS dan gambar HTML

Di banyak tempat di situs, saya menemukan campuran gambar latar belakang yang didefinisikan oleh gambar CSS dan HTML. Lihatlah contoh berikut:

<div style="background-image: url(me.jpg);"></div>
<img alt="" src="me.jpg">

Saya melihat ini di profil pengguna, dan dalam komponen yang digunakan dalam pembentukan tata letak kotak. Menariknya, properti opacityelemen <img>diatur ke 0. Sumber gambar aktif adalah properti background-image. Selain itu, properti digunakan di sini background-size: coveryang menghindari distorsi gambar.

Saya mencoba melakukan yang sebaliknya, yaitu untuk menampilkan elemen <img>dan menyembunyikan latar belakang CSS, dan membandingkan tata letak kotak. Hasil perbandingan ini ditunjukkan di bawah ini.

Di sebelah kiri adalah opsi di mana gambar latar belakang digunakan, dan di sebelah kanan adalah opsi di mana gambar HTML digunakan.

Jelas, gambar di sebelah kanan terdistorsi! Saya tidak tahu mengapa tim pengembangan tidak menggunakan properti CSSobject-fit: coveruntuk mencegah distorsi. Dan saya ingin tahu mengapa dua gambar digunakan di sini.

Setel Ulang Gaya

Saya perhatikan satu pola, yang merupakan penggunaan konstan dari kelas CSS yang ditambahkan ke elemen <div>. Berikut ini adalah CSS yang relevan:

.css-1dbjc4n {
    align-items: stretch;
    border: 0 solid black;
    box-sizing: border-box;
    display: flex;
    flex-basis: auto;
    flex-direction: column;
    flex-shrink: 0;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    min-height: 0px;
    min-width: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
    position: relative;
    z-index: 0;
}

Gaya ini berlaku untuk setiap elemen <div>pada halaman. Mengapa? Apakah pengaturan ulang gaya CSS tidak cukup di sini?

Beberapa gaya yang dijelaskan di atas cukup dimengerti oleh saya, semacam min-width: 0, karena ada beberapa koneksi dengan Flexbox. Tapi bagaimana dengan lekukan, lekukan, batas? Mengapa satu elemen <div>perlu direset gaya, mengingat fakta bahwa elemen ini tidak memiliki properti yang sesuai?

Flexbox dan min-width: 0

Nilai default dari properti min-widthadalah auto, yang ternyata nol. Ketika sesuatu ditampilkan sebagai elemen fleksibel, nilai propertinya min-widthsama dengan ukuran isinya. Mengizinkan perilaku ini dapat melanggar tata letak jika konten elemen lebih besar dari itu.

Untuk menghindari masalah ini, Anda perlu mengatur ulang properti min-widthuntuk keturunan elemen-fleksibel.

Elemen Flex dan pembungkus Flexbox

Tata letak yang ditunjukkan di atas menunjukkan apa yang mungkin terjadi jika konten elemen flex terlalu panjang. Perhatikan bahwa teks melampaui batas elemen pembungkus. Tetapi apa yang terjadi ketika menggunakan propertimin-width: 0.

Konten tidak melampaui elemen fleksibel

Menggunakan posisi: properti lengket

Saya perhatikan penggunaan properti position: stickydi sidebar kanan Twitter (di mana tren media dan rekomendasi mengenai pengguna untuk diikuti ditampilkan). Tampaknya menarik bagi saya bagaimana pekerjaan dengan nilai properti diatur bottomdan topketika menggulir. Nilai default adalah sebagai berikut:

.sidebar {
    position: sticky;
    width: 350px;
    bottom: -470.5px;
}

Saat halaman bergulir ke bawah, properti bottomdiganti dengan properti top: -480.5px. Saya pikir perancang melakukan ini untuk memungkinkan pengguna mencapai ujung bilah sisi terlebih dahulu. Properti topditambahkan setelah itu.

Elemen Pemisah

Sama seperti dalam desain Facebook yang saya analisis sebelumnya, dalam desain Twitter, di banyak tempat, elemen pemisah digunakan. Semua ini adalah elemen fleksibel yang lebarnya diatur menggunakan properti flex-basis.

Elemen Pemisah Elemen

pertama yang ditunjukkan pada gambar sebelumnya menggunakan properti saat mengatur elemen pemisahflex-grow: 1. Yang kedua menggunakan lebar tetap yang ditentukan dalam piksel.

Membuat Konten Tweet

Tweet

Di atas dibuat oleh saya tweet. Sekilas, mungkin tampak bahwa kita memiliki elemen di hadapan kita<p>atau<span>, di mana teks ditambahkan. Tetapi, ternyata, setiap smiley diwakili oleh tag yang terpisah<span>, dan jika teks berada di antara dua elemen tersebut, itu juga dibuat sebagai tag<span>.

Desain teks tweet

Emoticon - ini<span>, di mana ada elemen<div>,<div>berisi dua gambar. Salah satunya adalah latar belakang CSS, yang kedua adalah gambar HTML.

Karena kalimat pertama dibungkus dengan tag<span>, harus ada pemisah antara itu dan elemen dari tingkat yang sama seperti itu. Desainer menambahkan baris baru di awal kalimat kedua untuk memisahkan kalimat.

Kalimat kedua

Menggunakan nilai yang dihitung untuk memisahkan item

Tombol Kembali

Saat melakukan pencarian di Twitter, atau saat membuka halaman profil, tombol dapat dilihat. Gaya telah diterapkan pada tombol inimargin-left: -4px, menentukan indentasi kiri luar negatif. Saya tertarik dengan prosedur untuk menghitung nilai ini.

.back-button {
    margin-left: calc(5px + (-1 * (39px - 1.5em)) / 2);
}

Perhitungan di atas menghasilkan nilai -4px. Kenapa tidak bertanya saja -4px? Apakah ini lebih baik dalam hal ini daripada menggunakan fungsi calc()?

Lebar tautan navigasi

Tautan navigasi

Sejak hari pertama, ketika saya menemukan panel tautan navigasi, saya perhatikan bahwa ketika Anda mengarahkan kursornya, lebarnya sama dengan kontennya. Saya bertanya-tanya mengapa tidak membuat ikon dan label menutupi seluruh lebar elemen navigasi.

Di sini, perhatian saya tertuju pada penggunaan propertiflex-direction: columnuntuk setiap elemen bilah navigasi. Mengapa? Apakah ini perlu dalam situasi di mana hanya satu anak digunakan di sini?

Indentasi eksternal ditambahkan untuk berjaga-jaga

Lekukan yang dimaksud hadir dalam desain untuk mencegah perilaku tata letak halaman yang tidak diinginkan. Saya menarik perhatian pada dua contoh penggunaan indentasi yang ditambahkan ke elemen, sehingga bisa dikatakan, "berjaga-jaga". Mari lihat mereka.

Lekukan ditambahkan ke elemen "berjaga-jaga". Di sebelah kiri adalah konten normal elemen. Di sebelah kanan adalah konten yang terasa lebih lama dari biasanya.

Perhatikan apa yang terjadi ketika konten elemen terasa lebih lama dari konten normalnya. Yaitu, hal berikut terjadi di sini:

Teks terpotong.
Ada lekukan di antara elemen-elemen.

Lekukan eksternal memainkan peran placeholder, yang mencegah elemen dari menempati seluruh ruang. Jika Anda mempertimbangkan ini tepat waktu, Anda dapat menghindari masalah tak terduga yang mungkin timbul selama proyek. Disarankan agar Anda selalu menguji tata letak halaman menggunakan konten yang panjangnya lebih dari "normal".

Modal windows di area tampilan kecil

Saya memeriksa jendela pengeditan profil modal. Ternyata pada ketinggian tertentu area tampilan, tombol untuk Savejendela seperti itu tidak tersedia. Ini tampilannya.

Tombol Simpan tidak dapat diakses

Karena jendela modal tidak mendukung pengguliran,Savesaya tidakdapat membuka tombol. Tetapi jendela yang digunakan untuk mengontrol tampilan elemen mendukung ketinggian dinamis dan gulir.

Jendela yang mendukung perubahan ketinggian dinamis.

Mengapa satu jendela mendukung pengguliran dan yang lainnya tidak? Sangat menarik untuk mengetahui yang mana, menurut desainer Twitter, yang lebih penting? Adapun saya - ini persis jendela yang digunakan untuk mengedit profil.

Apakah Anda berencana mengadopsi ide apa pun dari desain Twitter?

Temuan CSS yang Menarik dalam Desain Twitter