12 fakta CSS yang kurang dikenali

3

CSS bukan bahasa yang terlalu kompleks. Tetapi walaupun anda telah menulis CSS selama bertahun -tahun, anda mungkin masih menemui perkara -perkara baru - sifat yang tidak pernah anda gunakan, nilai yang tidak pernah anda pertimbangkan, atau butiran spesifikasi yang tidak pernah anda ketahui.

Dalam penyelidikan saya, saya menjumpai tidbits kecil baru sepanjang masa, jadi saya fikir saya akan berkongsi sebahagian daripada mereka dalam jawatan ini. Diakui, tidak semuanya dalam jawatan ini akan mempunyai satu tan nilai praktikal segera, tetapi mungkin anda boleh memfailkan beberapa perkara ini untuk kegunaan kemudian.

Takeaways Key

Harta warna dalam CSS bukan sahaja untuk teks. Ia juga mempengaruhi warna teks alt pada imej yang hilang, sempadan pada elemen senarai, titik peluru pada senarai yang tidak teratur, penanda nombor pada senarai yang diperintahkan, dan elemen HR.

Harta penglihatan dalam CSS boleh ditetapkan untuk "runtuh". Nilai ini berfungsi seperti "tersembunyi" pada semua elemen kecuali baris jadual, kumpulan baris jadual, lajur jadual, dan kumpulan lajur jadual, di mana ia berfungsi sama dengan "paparan: tiada". Walau bagaimanapun, pengendalian pelayar "keruntuhan" tidak konsisten.

Latar Belakang Properti Shorthand di CSS kini termasuk tiga nilai baru sebagai tambahan kepada lima asal. Nilai-nilai baru adalah saiz latar belakang, asal-usul latar belakang, dan klip latar belakang.

• Harta klip dalam CSS hanya berfungsi pada unsur -unsur yang benar -benar diposisikan. Elemen yang anda gunakan klip mesti diposisikan sama sekali atau tetap.
• Dalam CSS, peratusan menegak adalah relatif kepada lebar kontena, bukan ketinggian kontena. Ini terpakai kepada sifat seperti padding atas dan bawah dan margin atas dan bawah.
1. Harta warna bukan hanya untuk teks
mari kita mulakan dengan perkara yang lebih mudah. Harta warna digunakan secara meluas oleh setiap pemaju CSS. Sesetengah daripada anda tidak berpengalaman dengan CSS mungkin tidak menyedari, bagaimanapun, bahawa ia tidak menentukan hanya warna teks.
Lihatlah demo di bawah:

lihat pen ctwfg oleh sitepoint (@sitePoint) pada codepen.

Pemberitahuan dalam CSS, hanya satu harta warna yang digunakan, pada elemen badan, menetapkannya menjadi kuning. Seperti yang anda lihat, segala -galanya di halaman berwarna kuning, termasuk:

teks alt yang dipaparkan pada gambar yang hilang

sempadan pada elemen senarai

peluru (atau penanda) pada senarai yang tidak teratur

• penanda nombor pada senarai yang dipesan
• elemen HR
Menariknya, elemen HR, secara lalai tidak mewarisi nilai harta warna, tetapi saya terpaksa memaksanya untuk melakukannya dengan menggunakan warna sempadan: mewarisi. Ini adalah tingkah laku yang aneh kepada saya.
Semua ini disahkan oleh spec:

• Harta ini menerangkan warna latar belakang teks elemen
  kandungan. Di samping itu ia digunakan untuk memberikan nilai tidak langsung yang berpotensi
  ... untuk sebarang sifat lain yang menerima nilai warna.

  Saya tidak dapat memikirkan apa -apa lagi yang layak sebagai 'latar depan', tetapi jika anda lakukan, beritahu kami dalam komen.

  2. Harta penglihatan boleh ditetapkan untuk "runtuh" ​​

  Anda mungkin menggunakan harta penglihatan beratus -ratus kali. Nilai yang paling biasa digunakan dapat dilihat (lalai untuk semua elemen) dan tersembunyi, yang membuat elemen hilang sambil membenarkannya tetap menduduki ruang seolah -olah ada (yang tidak seperti paparan: tidak).

  Nilai ketiga dan jarang digunakan untuk harta penglihatan adalah runtuh. Ini berfungsi dengan cara yang sama seperti yang tersembunyi pada semua elemen kecuali baris jadual, kumpulan baris jadual, lajur jadual, dan kumpulan lajur jadual. Dalam kes unsur-unsur berasaskan jadual ini, nilai keruntuhan sepatutnya berfungsi sama seperti paparan: tidak ada, sehingga ruang yang diduduki oleh baris/lajur yang runtuh dapat diduduki oleh kandungan lain.

  Malangnya, cara penyemak imbas mengendalikan keruntuhan tidak konsisten. Cuba demo berikut:

  lihat penglihatan pen: runtuh oleh sitepoint (@sitePoint) pada codepen.

  CSS-Tricks Almanac menasihati tidak pernah menggunakan ini, kerana ketidakkonsistenan penyemak imbas.

  dari pemerhatian saya:

  • di Chrome, tidak ada perbezaan jika anda menggunakan keruntuhan atau tersembunyi (lihat laporan dan komen pepijat ini)
  • Di Firefox, Opera, dan IE11, keruntuhan seolah -olah bertindak balas dengan tepat seperti yang sepatutnya: baris dikeluarkan dan baris di bawah bergerak.

  Diakui, nilai ini mungkin jarang sekali akan digunakan, tetapi ia wujud, jadi jika anda tidak tahu tentangnya sebelum ini, saya rasa dengan cara yang ganjil anda sekarang lebih pintar.

  3. Latar Belakang Harta Shorthand mempunyai nilai baru

  Dalam CSS2.1 Latar Belakang Hartanah Shorthand termasuk 5 Nilai Longhand-Latar Belakang, Imej Latar Belakang, Latar Belakang, Latar Belakang-Attachment, dan Latar Belakang. Dalam CSS3 dan seterusnya, ia kini termasuk tiga lagi, untuk jumlah sehingga 8. Berikut adalah bagaimana Nilai Peta:

  <span>background: [background-color] [background-image] [background-repeat]
  </span>            [background-attachment] [background-position] <span>/ [ background-size]
  </span>            [background-origin] [background-clip]<span>;</span>

  Perhatikan slash ke hadapan, sama seperti bagaimana font shorthand dan radius sempadan boleh ditulis. Slash membolehkan anda memasukkan nilai saiz latar belakang selepas kedudukan dalam penyemak imbas menyokong.

  Di samping itu, anda juga mempunyai sehingga dua deklarasi pilihan untuk latar belakang asal dan klip latar belakang.

  jadi sintaks kelihatan seperti ini:

  <span><span>.example</span> {
  </span>  <span>background: aquamarine <span>url(img.png)</span>
  </span>              no-repeat
                scroll
                center center <span>/ 50%
  </span>              content-box content-box<span>;
  </span><span>}</span>

  uji dalam penyemak imbas anda menggunakan demo ini:

  lihat nilai pena baru nilai shorthand oleh sitepoint (@sitePoint) pada codepen.

  Bagi sokongan penyemak imbas, nilai -nilai baru ini seolah -olah berfungsi dengan baik dalam semua pelayar moden, tetapi kemungkinan anda perlu memberikan gugusan yang baik untuk mana -mana pelayar yang tidak disokong sehingga ia merendahkan dengan anggun.

  4. Harta klip hanya berfungsi pada unsur -unsur yang benar -benar diposisikan

  Bercakap tentang klip latar belakang, anda mungkin juga melihat klip sebelum ini. Nampaknya ini:

  <span>background: [background-color] [background-image] [background-repeat]
  </span>            [background-attachment] [background-position] <span>/ [ background-size]
  </span>            [background-origin] [background-clip]<span>;</span>

  Ini akan 'klip' ​​elemen di lokasi yang ditentukan (dijelaskan di sini). Satu -satunya kaveat adalah bahawa elemen yang anda gunakan klip mesti diposisikan sepenuhnya. Oleh itu, anda mesti melakukan ini:

  <span><span>.example</span> {
  </span>  <span>background: aquamarine <span>url(img.png)</span>
  </span>              no-repeat
                scroll
                center center <span>/ 50%
  </span>              content-box content-box<span>;
  </span><span>}</span>

  anda dapat melihat bagaimana klip dilumpuhkan dalam demo di bawah apabila kedudukan: mutlak ditukar:

  lihat pena sifju oleh sitepoint (@sitePoint) pada codepen.

  Anda juga boleh menetapkan elemen ke kedudukan: tetap, kerana, menurut spec, unsur-unsur kedudukan tetap juga memenuhi syarat sebagai elemen 'benar-benar diposisikan'.

  5. Peratusan menegak adalah relatif kepada lebar kontena, bukan ketinggian

  Ini adalah sedikit keliru pada mulanya, yang saya tulis sebelum ini. Walaupun anda mungkin tahu bahawa lebar peratusan dikira berdasarkan lebar bekas, peratusan pada sifat seperti padding atas dan bawah dan margin atas dan bawah juga dikira berdasarkan lebar bekas, bukannya ketinggian.

  Berikut adalah contoh yang anda boleh menyesuaikan dengan gelangsar jarak, jadi anda dapat melihat kesannya:

  lihat pen qlnpm oleh sitepoint (@sitePoint) pada codepen.

  Perhatikan bahawa terdapat 3 peratusan "menegak" yang diisytiharkan pada kotak dalaman (padding atas dan bawah, dan margin bawah). Apabila gelangsar bergerak, ia hanya mengubah lebar kontena. Tetapi nilai -nilai lain berubah sebagai tindak balas terhadap ini, seperti output pada halaman yang ditunjukkan, menunjukkan bahawa nilai -nilai ini, apabila diisytiharkan sebagai peratusan, berdasarkan lebar kontena.

  6. Harta sempadan adalah seperti permulaan

  kita semua telah melakukan ini pada satu ketika:

  <span><span>.example</span> {
  </span>    <span>clip: rect(110px, 160px, 170px, 60px);
  </span><span>}</span>

  harta sempadan adalah harta tersendiri yang menetapkan gaya sempadan, lebar sempadan, dan warna sempadan-semuanya dalam satu perisytiharan.

  Tetapi jangan lupa bahawa setiap sifat yang mewakili harta sempadan itu sendiri adalah harta yang tersendiri. Jadi lebar sempadan sahaja dapat diisytiharkan:

  <span><span>.example</span> {
  </span>    <span>position: absolute;
  </span>    <span>clip: rect(110px, 160px, 170px, 60px);
  </span><span>}</span>

  Ini akan menetapkan lebar yang berbeza untuk setiap empat sempadan. Begitu juga dengan warna sempadan dan gaya sempadan, seperti yang ditunjukkan dalam demo yang mengerikan ini:

  Lihat pena pelbagai perbatasan oleh SitePoint (@SitePoint) pada codepen.

  Di samping itu, setiap sifat tersebut boleh dipecahkan lebih jauh dengan gaya kiri-kiri, lebar sempadan-lebar, sempadan-bawah, dan sebagainya.

  tetapi tangkapannya ialah anda tidak boleh menggunakan sempadan tetap biasa untuk menetapkan nilai yang berbeza untuk sisi yang berbeza. Oleh itu, ia tersendiri di dalam diri sendiri di dalam diri sendiri, tetapi tidak betul -betul.

  7. Harta Teks-Dekorasi kini menjadi Shorthand

  Saya tahu sesuatu dalam senarai ini akan meniup fikiran anda.

  ini kini standard, menurut spec:

  <span>background: [background-color] [background-image] [background-repeat]
  </span>            [background-attachment] [background-position] <span>/ [ background-size]
  </span>            [background-origin] [background-clip]<span>;</span>

  Harta ini kini mewakili 3 sifat: Teks-dekorasi-baris, teks-warna, dan gaya teks.

  Malangnya, Firefox adalah satu -satunya penyemak imbas yang menyokong sifat -sifat baru ini, dan (saya mengandaikan, untuk keserasian ke belakang), tidak menyokong mereka secara langsung.

  Cuba demo di bawah di Firefox:
  lihat pen hapgb oleh sitepoint (@sitePoint) pada codepen.
  Demo menggunakan nilai -nilai Longghand untuk melakukan ini. Ini akhirnya akan menjadi satu yang sukar kerana pada masa ini mana-mana pelayar yang melihat nilai tambahan dalam penyerapan teks akan membatalkan keseluruhan perisytiharan, yang jelas tidak baik untuk keserasian ke belakang.
  8. Harta lebar sempadan menerima nilai kata kunci
  tidak betul-betul menghancurkan bumi, dan ini bukanlah sesuatu yang baru, tetapi, sebagai tambahan kepada nilai panjang standard (mis. 5px atau 1EM), harta lebar sempadan menerima tiga nilai kata kunci: sederhana, nipis, dan tebal.
  Malah, nilai awal harta lebar sempadan adalah "sederhana". Demo di bawah menggunakan "tebal":
  Lihat kata kunci lebar sempadan "tebal" oleh sitepoint (@sitePoint) pada codepen.
  Apabila penyemak imbas menjadikan nilai kata kunci ini, spec tidak memerlukannya memetakannya kepada nilai panjang tertentu, tetapi, dari apa yang saya dapat lihat, semua pelayar seolah -olah menggunakan 1px, 3px, dan 5px.
  9. Tiada siapa yang menggunakan imej sempadan
  Saya menulis tentang harta CSS3 sempadan-imej di Sitepoint sebentar lagi. Ciri ini disokong dalam semua pelayar moden kecuali IE10 dan ke bawah. Tetapi adakah ada yang peduli?
  Ia kelihatan seperti ciri yang sangat kemas, membolehkan anda membuat imej sempadan yang cair. Gunakan pemegang saiz semula dalam demo ini untuk mengujinya:
  Lihat demo imej sempadan pena oleh SitePoint (@SitePoint) pada codepen.
  Malangnya, imej sempadan kelihatan seperti sesuatu yang baru yang tidak banyak digunakan oleh orang. Tetapi mungkin saya salah. Jika anda tahu apa-apa contoh imej sempadan yang digunakan pada projek sebenar, atau jika anda telah menggunakannya, sila beritahu kami dalam komen dan saya dengan senang hati akan mengakui saya salah.
  10. Terdapat harta sel kosong
  ini mempunyai sokongan di mana -mana termasuk IE8, dan ia kelihatan seperti ini:

  <span>background: [background-color] [background-image] [background-repeat]
  </span>            [background-attachment] [background-position] <span>/ [ background-size]
  </span>            [background-origin] [background-clip]<span>;</span>

  Seperti yang mungkin anda fikirkan, ia digunakan untuk jadual HTML. Ia memberitahu penyemak imbas sama ada untuk menunjukkan atau menyembunyikan sel -sel meja yang tidak mempunyai kandungan di dalamnya. Cuba butang togol dalam demo ini untuk melihat kesan menukar nilai harta sel kosong:

  lihat demo sel kosong pena oleh sitepoint (@sitePoint) pada codepen.

  Dalam kes ini, saya terpaksa memastikan sempadan kelihatan dan tidak runtuh dan saya terpaksa menambah beberapa jarak di antara sempadan sel. Dalam sesetengah kes, harta ini tidak akan mempunyai kesan visual kerana perlu ada sesuatu yang dapat dilihat di atas meja untuk membuat apa -apa perbezaan.

  11. Harta gaya font menerima nilai "serong"

  hampir setiap kali anda melihat harta gaya font, ia digunakan sama ada dengan nilai "normal" atau "italic". Tetapi anda juga boleh memberikan nilai "serong":

  Lihat pena Italic vs Oblique oleh SitePoint (@SitePoint) pada codepen.

  Tetapi apa sebenarnya maksudnya? Dan mengapa ia kelihatan sama seperti Italic?

  spec menjelaskan bahawa nilai "serong" ...

  "... Memilih fon yang dilabelkan sebagai wajah serong, atau wajah miring jika tidak."

  Keterangan "Italic" dalam spec pada dasarnya sama. Perkataan "serong" adalah istilah tipografi yang pada dasarnya mewakili teks slanted, tetapi bukan miring yang benar.

  Kerana cara CSS mengendalikan teks serong, ia boleh ditukar dengan italic melainkan (seperti yang dijelaskan oleh spec) font yang digunakan mempunyai wajah yang dikenal pasti sebagai serong.

  Saya tidak pernah mendengar fon yang sebenarnya mempunyai wajah serong, tetapi mungkin saya salah. Dari penyelidikan yang saya lakukan, nampaknya salah untuk fon untuk menawarkan wajah italic dan serong, kerana Oblique sepatutnya menjadi versi palsu italic pada fon yang tidak mempunyai italic yang benar.

  Jadi, jika saya tidak tersilap, apa maksudnya adalah jika fon tidak mempunyai wajah italic yang benar, menetapkan CSS ke gaya font: Italic sebenarnya akan memaparkan font sebagai gaya font: serong.

  12. Word-Wrap adalah sama seperti limpahan-wrap

  Hartanah Word-Wrap tidak digunakan terlalu kerap, tetapi ia sangat berguna dalam keadaan tertentu. Satu contoh yang sering digunakan adalah untuk membantu rentetan teks yang tidak lama lagi (seperti URL) untuk membungkus, dan bukannya keluar dari bekas mereka. Berikut adalah contoh:

  lihat demo pena perkataan pen oleh sitepoint (@sitePoint) pada codepen.

  Kerana ini pada asalnya merupakan penciptaan Microsoft, harta ini disokong dalam semua pelayar termasuk Internet Explorer sepanjang perjalanan ke IE5.5.

  Walaupun penyemak imbas dan, dari apa yang saya dapat lihat, sokongan yang konsisten, W3C memutuskan untuk menggantikan perkataan-wrap dengan limpahan-bungkus-saya meneka kerana nama terdahulu dianggap sebagai salah faham. Overflow-Wrap mempunyai nilai yang sama seperti Word-Wrap, dan Word-Wrap kini dianggap sebagai "sintaks alternatif" untuk limpahan.

  Walaupun beberapa penyemak imbas baru menyokong limpahan-bungkus, nampaknya tidak berguna untuk mengganggu dengannya sejak pelayar lama mengendalikan perkataan-wrap dengan baik, dan semua pelayar dikehendaki terus menyokong perkataan-wrap selama-lamanya, atas sebab-sebab warisan.

  kita boleh mula menggunakan limpahan-bungkus apabila semua penyemak imbas penggunaan auto-tetapi sehingga itu, saya tidak melihat titik dalam perubahan dari sintaks lama.

  Berapa banyak yang baru bagi anda?

  Adakah anda belajar apa -apa dari siaran ini? Saya harap begitu. Mungkin pemaju CSS yang paling berpengalaman tahu banyak, jika tidak semua, dari mata di atas. Tetapi mungkin mereka yang lebih baru untuk CSS akan memberi manfaat lebih banyak daripada ini.

  Adalah menarik untuk melihat berapa banyak perkara ini baru kepada pembaca kami. Hantarkan komen di bawah memberitahu kami berapa banyak yang baru kepada anda (mis. 6/12, 4/12, atau apa sahaja).

  Pick up Loads lebih banyak petua dan petua CSS dengan keahlian yang boleh dipelajari. Anda akan mendapat akses kepada berpuluh-puluh buku dan kursus, termasuk penjual terbaik seperti Jump Start CSS , Anthology CSS dan banyak lagi. Soalan Lazim (Soalan Lazim) Mengenai CSS

  Apakah ciri -ciri unik CSS yang tidak dikenali? Sebagai contoh, CSS mempunyai harta yang dipanggil 'Calc' yang membolehkan anda melakukan pengiraan untuk menentukan nilai harta CSS. Ini boleh menjadi sangat berguna untuk reka bentuk responsif. Satu lagi harta yang kurang dikenali ialah 'CH', yang bermaksud watak dan boleh digunakan untuk menetapkan lebar dan pengukuran lain yang berkaitan dengan lebar watak '0' fon yang digunakan. Harta 'animasi' di CSS membolehkan anda menghidupkan hampir mana -mana harta. Anda boleh mengawal tempoh, fungsi masa, kelewatan, kiraan lelaran, arah, mod isi, dan memainkan keadaan animasi. Ini boleh menjadi alat yang berkuasa untuk meningkatkan pengalaman pengguna di laman web. Ini boleh berguna dalam situasi di mana anda ingin memastikan konsistensi merentasi elemen, atau apabila anda ingin memudahkan kod CSS anda dengan mengurangkan kelebihan.

  Apakah tujuan harta 'z-indeks' dalam CSS? Unsur-unsur dengan nilai 'z-indeks' yang lebih tinggi akan muncul di atas elemen dengan nilai 'z-indeks' yang lebih rendah. Ini boleh menjadi sangat berguna apabila berurusan dengan unsur -unsur yang bertindih, seperti dalam susun atur kompleks atau ketika membuat menu modal atau dropdown. Anda boleh menggunakan CSS untuk mengawal penampilan medan teks, kotak semak, butang radio, dan input bentuk lain. Ini boleh menjadi alat yang berkuasa untuk meningkatkan kebolehgunaan dan estetika bentuk di laman web. Secara lalai, lebar dan ketinggian elemen tidak termasuk padding dan sempadan. Walau bagaimanapun, dengan menetapkan harta 'saiz kotak' ke 'kotak sempadan', anda boleh memasukkan padding dan sempadan dalam pengiraan lebar dan ketinggian. Ini berguna untuk membuat teks membungkus di sekitar imej atau untuk membuat susun atur berbilang lajur.

  Apakah 'viewport' dalam CSS? Anda boleh menggunakan unit 'VW' (Viewport Lebar) dan 'VH' (ketinggian Viewport) dalam CSS ke unsur saiz berbanding dengan Viewport. Ini amat berguna untuk membuat reka bentuk responsif yang menyesuaikan diri dengan saiz skrin yang berbeza.

  Bolehkah CSS digunakan untuk membuat kecerunan? Fungsi 'linear-gradient' dan 'radial-gradient' dalam CSS membolehkan anda membuat peralihan yang lancar antara dua atau lebih warna. Ini boleh menjadi alat yang berkuasa untuk meningkatkan estetika laman web. Sebagai contoh, ':: sebelum' dan ':: selepas' pseudo-unsur digunakan untuk memasukkan kandungan sebelum atau selepas kandungan elemen. Ini berguna untuk menambah ciri hiasan ke laman web.

Atas ialah kandungan terperinci 12 fakta CSS yang kurang dikenali. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!