Teknik HTML, CSS dan JavaScript yang penting

Pengarang: Monica Porter

Tarikh Penciptaan: 22 Mac 2021

Tarikh Kemas Kini: 17 Mungkin 2024

Video.: 🔴 Membuat Website Dengan HTML, CSS, Dan JavaScript

Kandungan

Susun atur
Pembaikan Jelas
Saiz kotak
Berbilang lajur
Pengiraan
Gaya
Ketelusan
Penapis
Penggantian gambar
Video responsif
Kefungsian
Memilih elemen dengan mudah
Membuat susunan baru
Bersihkan objek dokumen dan tingkap
Suka ini? Baca ini!

Artikel ini pertama kali muncul dalam edisi 234 majalah .net - majalah terlaris di dunia untuk pereka dan pembangun web.

Teknik, intinya, adalah cara untuk melaksanakan tugas dan, sebagai pembangun dan pereka frontend, kita memiliki banyak tugas. Walaupun begitu, kita sering lupa betapa banyak perubahan landskap ini. Dari tahun 2002 hingga 2010, komuniti kami hancur dengan pengurangan kod dan sumber, yang menghalang prestasi dan kebolehlangsungan. Untuk mengatasinya, kami membuat banyak tip, trik dan peretasan yang kami sebut sebagai 'teknik'. Kami masih menyelesaikan tugas, bukan dengan cara yang paling cekap.

Melakukan 360, beberapa tahun kebelakangan ini telah menyaksikan pelaksanaan dan piawaian yang lebih baik muncul, membolehkan kita sebagai komuniti mengembangkan 'teknik' yang lebih baru dan lebih maju. Landskap baru inilah yang dianggap sebagai 'web moden'.

Oleh kerana 'Web 2.0' menjadi stagnan dan membingungkan, begitu juga 'web moden'. Beri masa. Yang mengatakan, buat masa ini, kita dapat menggunakan dan menyalahgunakan istilah tersebut selama ada pemahaman umum tentang apa yang diwakilinya.

Pada tahun 2010 spesifikasi HTML5 mendarat, menyediakan persekitaran web separa standard yang baru. Penyemak imbas seperti Opera, Firefox, Chrome dan Safari merangkul gelombang baru ini dan mendorong pasukan dev mereka ke had baru pelaksanaan standard dan penerokaan API. Untuk memberi anda gambaran tentang bagaimana 'onboard' penyemak imbas ini, periksa www.html5readiness.com visualisasi sokongan HTML5 yang berubah.

Jangan risau dengan kekurangan sokongan di Internet Explorer. Kami dapat mengatasi ini berkat Google Chrome Frame. Sejak Google memperkenalkannya pada tahun 2010, ini menjadi mekanisme sokongan untuk Internet Explorer. Semua versi IE dapat disasarkan dengan Chrome Frame, yang mendorong pengguna baru untuk memuat turun plug-in yang menjadikan laman web yang disertakan dengan versi Chrome ringan, di dalam IE. Untuk melaksanakan Chrome Frame kami tambahkan meta> tag berikut di kepala> tag laman kami.

meta http-equiv = "X-UA-Compatible" content = "chrome = 1" />

Dari sini kita dapat meminta pengguna IE untuk memuat turun plug-in, jika belum dipasang, menggunakan JavaScript:

jenis skrip = "text / javascript" src = "http: // ajax.
googleapis.com/ajax/libs/chrome-frame/1/CFInstall.
min.js "> / skrip>
skrip>
window.onload = fungsi () {
CFInstall.check ({
mod: "overlay",
destinasi: "http://www.domainanda.com"
});
};
/ skrip>

tujuan dapat diatur untuk menghantar pengguna ke pautan tertentu setelah memasang pemalam. Berhati-hati: walaupun Chrome Frame memberi kita kaedah untuk berkembang dengan ketat untuk penyemak imbas yang benar-benar moden, kita tidak boleh lupa bahawa pengguna mempunyai pilihan untuk tidak memuat turun pemalam jika mereka tidak mahu. Sekiranya tidak, dan anda diminta untuk memberikan sokongan untuk satu atau versi IE lain yang berbeza, anda perlu meluangkan lebih banyak masa untuk mengetahui apa yang anda boleh dan tidak dapat memberikan, dengan pengalaman anda, penyemak imbas silang.

Dengan kod ini memberikan ruang permainan yang jauh lebih baik untuk dikembangkan di tumpukan web moden, kita dapat bergerak maju dengan fikiran kita dengan tenang. Anda mungkin ingat harus membuat sebilangan peretasan khusus penyemak imbas untuk menjadikan laman web anda disusun penyemak imbas kanan yang betul, membuat banyak elemen kosong yang akan digunakan dengan gambar yang anda potong, atau bahkan menulis kod JavaScript berlebihan atau berlebihan untuk mendapatkan fungsi paling mudah untuk berfungsi. Semua rasa sakit ini, dari segi tertentu, adalah masalah yang sama yang kita bimbangkan hari ini. Kami masih memperjuangkan lebih banyak kawalan dan alat yang lebih baik untuk memerangi susun atur, gaya dan fungsi tetapi pada tahap yang sudah matang.

Susun atur

Pembaikan Jelas

Mengambang elemen diperkenalkan kembali dalam CSS 2.1 tetapi tidak pernah menjadi penyelesaian lengkap yang kami harapkan. Salah satu masalah terbesar adalah mengekalkan dimensi elemen induk ketika elemen anak diambang. Untuk mengatasi ini, teknik pembaikan jelas dibuat.

Ikuti HTML berikut:

div>
div> ... / div>
div> ... / div>
/ div>

Teknik ini ditulis oleh Nicolas Gallagher:

.clearfix: sebelum ini,
.clearfix: selepas {
kandungan: " ";
paparan: meja;
}
.clearfix: selepas {
jelas: kedua-duanya;
}
.clearfix {
* zum: 1;
}

Sekiranya anda menggunakan HTML5Boilerplate untuk memulakan projek anda, maka anda akan mempunyai versi teknik pembaikan yang betul ini.

Saiz kotak

Selama bertahun-tahun pembangun membahaskan pelaksanaan model kotak mana yang lebih masuk akal. Mod Quirks vs Standards benar-benar bermaksud: 'sekiranya dimensi elemen berubah, setelah ditetapkan, ketika batas dan padding diterapkan, atau tidak'.

Kini telah disepakati secara meluas bahawa masuk akal untuk melapisi sempadan dan pelapik dari ruang yang ada dalam elemen, dan tidak menambah lebar atau tinggi elemen. Perbahasan telah dibuat tidak relevan dengan pelaksanaan ukuran kotak yang meluas. Penyemak imbas akan mengambil petunjuk daripada anda dan bukan sebaliknya.

Dipopulerkan oleh Chris Coyier dan Paul Irish, teknik merangkumi semua dapat dilaksanakan dengan yang berikut:

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: kotak sempadan;
ukuran kotak: kotak sempadan;
}

Menggunakan * pemilih dalam CSS telah diperdebatkan, disebabkan oleh prestasi yang berpotensi. Tuntutan seperti ini tidak berguna jika anda tidak mengoptimumkan semua aspek lain dari laman web / aplikasi anda. Menggunakan border-box akan menjadikan penyemak imbas menambah padding dan border di dalam ruang yang tersedia. 'Standards Mode' dapat digunakan dengan menetapkan ukuran kotak ke isi-kotak.

Berbilang lajur

Web sangat diilhamkan oleh bentuk dan jenis tulisan. Malangnya, kita terperangkap dalam fasa perkamen. Sebahagian daripada isu-isu ini akan dihadapi dengan spesifikasi Paged-Media dan CSS Region yang telah lama ditunggu-tunggu. Yang mengatakan, langkah pertama menuju tata letak yang lebih mirip majalah diambil ketika penyemak imbas mula menerapkan multi-lajur CSS. Kod untuk menghasilkan kesan ini agak mudah:

p {
-webkit-lajur-kiraan: 2;
-moz-lajur-kiraan: 2;
kiraan lajur: 2;
}

Anda boleh mengetahui lebih lanjut mengenai spesifikasi multi-lajur CSS3, serta cadangan JavaScript yang boleh anda gunakan untuk penyemak imbas apa pun tanpa sokongan, dari blog A List Apart.

Pengiraan

Mengira dimensi boleh menjadi sukar. Dahulu, kita tidak mempunyai cara untuk melakukan pengiraan unit, apalagi pengiraan unit bercampur. Itu semua berubah terima kasih kepada calc. Membuat kesan empuk yang tidak mempengaruhi lebar elemen awal atau menggunakan sesuatu seperti ukuran kotak: border-box; , sehingga baru-baru ini, hanya mungkin dilakukan dengan menambahkan elemen yang mengandungi tambahan.

.dipasang {
margin: 0 automatik;
kedudukan: saudara;
lebar: -webkit-calc (100% - (20px * 2));
lebar: -moz-calc (100% - (20px * 2));
lebar: calc (100% - (20px * 2));
}

calc () mengurus pengiraan lebar yang betul berdasarkan lebar induk .padded dan tolak padding 20px yang ditentukan. Saya mengalikannya dengan 2 untuk kedua-dua sisi elemen saya, memusatkan elemen menggunakan kedudukan relatif dan margin kiri dan kanan automatik.

Gaya

Ketelusan

Mendapatkan gaya elemen yang betul selalu bergantung pada jenis alat yang kami ada dalam CSS. Ketelusan adalah salah satu varian sokongan pertama yang akan anda alami pada awal hingga pertengahan 2000-an.

Dengan munculnya HTML5 dan usaha standard yang lebih fokus, penyemak imbas mempunyai pelaksanaan standard sifat kelegapan, dan telah menunjukkan sokongan saluran alfa sesuai dengan spesifikasi Modul Warna yang baru. Ini termasuk garis panduan RGBA dan HSLA.

sebuah {
warna: rgba (0,255,0,0.5);
latar belakang: rgba (0,0,255,0.05);
sempadan: rgba (255,0,0,0.5);
}

Anda boleh menggunakan warna RGBA atau HSLA di mana sahaja anda mendapat nilai HEX. Terdapat juga senarai warna menarik dengan nama yang ditentukan yang boleh anda periksa tepat dalam spesifikasi. Ini sangat berguna ketika anda ingin membuat perpaduan dinamik antara elemen.

Penapis

Penapis CSS sangat menarik. Mempunyai kemampuan untuk mengubah tampilan dan nuansa elemen secara dinamis pada halaman tanpa memerlukan pemalam pihak ketiga sangat mengagumkan, dan akan membantu mengurangkan masa anda yang dihabiskan di Photoshop.

img src = "market.webp">
img {
-webkit-filter: skala kelabu (100%);
}

Penapis CSS pada masa ini hanya disokong dalam penyemak imbas WebKit sehingga penggunaannya harus bersifat tambahan, tidak bergantung. Baca lebih lanjut di sini.

Penggantian gambar

Menggantikan teks dengan gambar sudah lama wujud. Malangnya, masih ada kekurangan, kebolehaksesan, teknik penggantian gambar terkini dan paling canggih. Tetapi dua baru-baru ini muncul yang sangat pintar, dan unik dalam hak mereka sendiri. Yang pertama ditulis oleh Scott Kellman:

h1 class = 'hide-text'> Logo Laman web Saya / h1>
.hide-text {
teks-inden: 100%;
ruang putih: nowrap;
limpahan: tersembunyi;
}

Yang kedua ditulis oleh Nicolas Gallagher:

.hide-text {
fon: 0/0 a;
teks-bayangan: tidak ada;
warna: telus;
}

Video responsif

Mendapatkan media untuk skala dengan betul dalam persekitaran yang responsif boleh menjadi cabaran. Dengan semakin banyak laman web yang menghormati reka bentuk adaptif, penting untuk menangani dimensi elemen dan nisbah aspek dengan betul.

Video yang disematkan telah menjadi salah satu jenis media yang lebih mencabar untuk dikendalikan kerana cara perkhidmatan pihak ketiga menyajikan kandungan. Embed YouTube biasa kelihatan seperti ini:

iframe width = "640" height = "390" src = "http: // www.youtube.com/embed/oHg5SJYRHA0" frameborder = "0" allowfullscreen = ""> / iframe>

Elemen iframe kemudian mengandungi objek Flash atau elemen penyematan. Menggunakan sesuatu seperti iframe {maxwidth: 100%; } tidak akan berfungsi kerana elemen bersarang tidak akan diubah saiznya dengan betul apabila lebarnya berubah. Jadi, kita mesti melakukan tipu muslihat.

div>
iframe width = "640" height = "390" src = "http://www.youtube.com/embed/oHg5SJYRHA0" frameborder = "0" allowfullscreen = ""> / iframe>
/ div>

Membungkus iframe dalam elemen lain akan memberi kita kawalan yang kita perlukan untuk menambahkan fungsi responsif yang betul pada video.

.video {
kedudukan: saudara;
padding-bottom: 56.25%;
tinggi: 0;
limpahan: tersembunyi;
}
.video iframe,
objek video,
.sebat video {
kedudukan: mutlak;
atas: 0;
kiri: 0;
lebar: 100%;
tinggi: 100%;
}

Menetapkan bahagian bawah pembalut .video: 56.25%; adalah keajaiban dalam kaedah ini. Menggunakan padding bermaksud peratusan yang digunakan akan berdasarkan lebar ibu bapa; ‘56 .25% ’akan membuat nisbah aspek 16: 9. Lakukan matematik sendiri, jika anda mahu. 9/16 = 0.5625. 0.5625 * 100 = 56.25 (ini adalah peratus kami).

Kefungsian

Memilih elemen dengan mudah

Dengan populariti sebilangan perpustakaan JavaScript (jQuery, misalnya), jawatankuasa ECMAScript dan standard W3C memperhatikan salah satu bahagian inti fungsi yang kurang dimiliki oleh pemaju - pemilihan elemen yang baik. Kaedah seperti getElementByID () dan getElementByClassName () adalah pantas tetapi tidak fleksibel dan kuat seperti enjin pemilih yang berasal dari komuniti pemaju; querySelectorAll () adalah cara badan standard untuk meniru beberapa fleksibiliti itu dalam kaedah pemilih asli.

var item = document.querySelectorAll ('# header .item');

querySelectorAll () boleh dilewatkan pemilih berganda dan campuran. Baca lebih lanjut mengenai ini.

Membuat susunan baru

Mengulangi tatasusila adalah sesuatu yang menjadi meletihkan untuk ditulis. Menulis dan menulis semula gelung () tidak menyeronokkan. Dalam JS versi 1.6, kaedah peta () mendarat memberikan sokongan untuk cara mudah untuk berulang dan membuat susunan baru dari yang lain.

var people = ['Heather', 'James', 'Kari', 'Kevin'];
var Welcome = people.map (fungsi (nama) {
kembalikan 'Hai' + nama + '!';
});

Menjalankan kod ini, jika kita mahu console.log (selamat datang) anda akan melihat sambutan adalah susunan baru [‘Hi Heather!’, ‘Hai James!’, ‘Hai Kari!’, ‘Hai Kevin!’ ].

Bersihkan objek dokumen dan tingkap

Perpustakaan JavaScript pihak ketiga cenderung mengacaukan dokumen asli dan objek tetingkap. Ini boleh menjadi masalah untuk perpustakaan pihak ketiga yang lain, dan pembangunnya termasuk di dalamnya. Sebagai mana-mana pihak, pastikan anda bekerja dengan versi bersih dari kedua-dua objek dengan membuat contoh baru dari mereka. Kaedah terbaik untuk melakukannya adalah dengan membuat elemen iframe, memasukkannya ke dalam DOM dan menyimpan contoh baru objek tersebut.

var iframe = document.createElement ('iframe');
iframe.style.display = "tiada";
iframe = document.body.appendChild (iframe);
var _window = iframe.contentWindow;
var _document = iframe.contentDocument ||
iframe.contentWindow.document;
document.body.removeChild (iframe);

Walaupun terdapat peningkatan besar pada timbunan web, terus melengkapkan dan menyempurnakan rangkaian teknologi kami untuk memenuhi cabaran yang kami hadapi dalam susun atur, gaya dan fungsi projek kami masih sangat penting. Untuk mengekalkan pertumbuhan ekosistem yang baik, kita mesti mendorong badan standard dan vendor penyemak imbas untuk terus maju dengan spesifikasi baru dan pelaksanaan ciri inovatif sambil berkongsi pengetahuan kita sendiri dengan rakan pemaju dan pereka. Lebih banyak pandangan, kurang peretasan.

Darcy Clarke adalah pemaju pemenang anugerah, pengasas bersama syarikat tema WordPress Themify dan agregator transaksi harian DealPage, dan ahli pasukan jQuery. Dia bekerja di Polar Mobile sebagai pemaju UX kanan.