Dalam artikel ini, saya akan bercakap tentang cara membuat editor kod berasaskan pelayar yang sangat mudah menggunakan kebanyakannya CSS. Saya pada asalnya membina ini apabila saya perlu membenarkan pengguna mengedit JSON dalam CMS yang saya sedang bina.

Jika anda hanya mahu melompat ke kod dan contoh yang berfungsi, inikan sahaja. Kod boleh didapati di sini dan contoh yang berfungsi di sini

Contenteditable menyebalkan...

Jadi jika anda pernah terfikir untuk membina editor kod anda sendiri, anda mungkin telah melihat contenteditable. Walaupun contenteditable bagus untuk banyak situasi, terdapat satu masalah besar berkaitan dengan mengemas kini kandungan semasa anda menaip. Hampir mustahil untuk meletakkan kursor kembali ke tempatnya selepas anda menyerlahkan sintaks kod dalam editor apabila ia berubah.

Dalam kes saya, saya mahukan sesuatu yang sangat minimum tanpa mencapai perpustakaan yang besar dan berat untuk ini. Saya pergi untuk melihat sama ada saya boleh membina editor yang sangat mudah menggunakan kebanyakannya CSS, hanya menggunakan Javascript untuk mencipta output yang diserlahkan sintaks dan mengemas kini pratonton.

Saya mahu menaip dalam tetapi dan hanya kemas kini pratonton berasingan kod yang diserlahkan sintaks. </p> <h2> Bagaimana ilusi berfungsi </h2> <p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173041269277729.jpg" class="lazy" alt="A Simple, mostly CSS code editor"></p> <h2> Kod HTML </h2> <pre class="brush:php;toolbar:false"><div id="editor"> <div class="preview"></div> <textarea class="code" spellcheck="false"></textarea> </div> </pre> <ul> <li>Satu <textarea> dengan teks lutsinar</li> <li>Satu <div> diisi dengan kod yang diserlahkan sintaks anda. </li> <li>Bekas yang membalut <textarea> dan pratonton anda <div> supaya mereka boleh menatal bersama-sama dan kekal berbaris.</li> </ul> <h2> CSS </h2> <p>Berikut ialah keseluruhan CSS yang saya gunakan untuk editor.<br> </p> <pre class="brush:php;toolbar:false">html, body { height: 100vh; width: 100vw; padding: 0; margin: 0; } #editor { height: 100%; width: 100%; box-sizing: border-box; display: grid; grid-template: 1fr / 1fr; place-items: top; overflow: auto; padding: 2rem; background-color: #1a1723; } #editor .code, #editor .preview { all: unset; } #editor .code, #editor .preview { height: auto; grid-column: 1 / 1; grid-row: 1 / 1; font-family: Monaco, monospace; font-size: 16px; resize: none; line-height: 24px; white-space: pre-wrap; overflow: hidden; } #editor .preview { pointer-events: none; color: #ccc; } #editor .code { color: rgba(255, 255, 255, 0); caret-color: magenta; } </pre> <h3> Bertindih elemen </h3> <p>Salah satu bahagian penting di sini ialah menggunakan grid paparan untuk menindih kawasan teks dan pratonton<br> </p> <pre class="brush:php;toolbar:false">#editor { ... display: grid; grid-template: 1fr / 1fr; place-items: top; overflow: auto; ... } </pre> <p>Saya menggunakan unit fr untuk menindih dua elemen di dalam bekas. Anda boleh membaca lebih lanjut tentang fr di CSSTricks di sini.</p> <h3> Mengikat kawasan teks dan pratonton secara sama </h3> <p>Anda mungkin perasan bahawa saya menggunakan peraturan yang sama pada pratonton dan kawasan teks. Ini memastikan ia bertindih dengan tepat.<br> </p> <pre class="brush:php;toolbar:false">#editor .code, #editor .preview { height: auto; grid-column: 1 / 1; grid-row: 1 / 1; font-family: Monaco, monospace; font-size: 16px; resize: none; line-height: 24px; white-space: pre-wrap; overflow: hidden; } </pre> <h3> Jadikan textarea telus </h3> <p>Menggunakan rgba untuk warna teks membolehkan saya mempunyai teks sepenuhnya telus, jadi nampaknya anda sedang memilih dan mengedit pratonton.<br> </p> <pre class="brush:php;toolbar:false">#editor .code { color: rgba(255, 255, 255, 0); caret-color: magenta; } </pre> <h2> Sedikit Javascript </h2> <p>Kami memerlukan sedikit Javascript untuk menggabungkan ini semua. Mari lihat apa yang kita perlukan.<br> </p> <pre class="brush:php;toolbar:false">const $preview = document.querySelector("#editor .preview"); const $code = document.querySelector("#editor .code"); function mirror() { // make textarea grow to height of content so we can scroll together $code.style.height = $code.scrollHeight; // update the preview underlay with the syntax highlight $preview.innerHTML = Prism.highlight( $code.value, Prism.languages.javascript, "javascript", ); } // insert two spaces on tab $code.addEventListener("keydown", (ev) => { if (ev.code === "Tab") { ev.preventDefault(); $code.setRangeText(" ", $code.selectionStart, $code.selectionStart, "end"); mirror(); } }); $code.addEventListener("input", mirror); mirror(); </pre> <blockquote> <p>Kami akan menggunakan Prism untuk ini, tetapi anda boleh menggunakan apa sahaja yang anda suka. </p> </blockquote> <h3> Fungsi mirror() sedang melakukan beberapa perkara di sini. </h3> <pre class="brush:php;toolbar:false"><div id="editor"> <div class="preview"></div> <textarea class="code" spellcheck="false"></textarea> </div> </pre> <p>Ini memastikan bahawa semasa anda menaip, ketinggian <textarea> tumbuh, supaya bekas akan menatal dan bukannya <textarea> sendiri. Anda mungkin pernah melihat ini digunakan untuk membuat kawasan teks "auto-tumbuh" sebelum ini.<br> </p> <pre class="brush:php;toolbar:false">html, body { height: 100vh; width: 100vw; padding: 0; margin: 0; } #editor { height: 100%; width: 100%; box-sizing: border-box; display: grid; grid-template: 1fr / 1fr; place-items: top; overflow: auto; padding: 2rem; background-color: #1a1723; } #editor .code, #editor .preview { all: unset; } #editor .code, #editor .preview { height: auto; grid-column: 1 / 1; grid-row: 1 / 1; font-family: Monaco, monospace; font-size: 16px; resize: none; line-height: 24px; white-space: pre-wrap; overflow: hidden; } #editor .preview { pointer-events: none; color: #ccc; } #editor .code { color: rgba(255, 255, 255, 0); caret-color: magenta; } </pre> <p>Kemudian kami menggunakan Prism untuk mengambil kod daripada <textarea> sintaks menyerlahkannya dan letakkan hasilnya dalam pratonton <div></p> <h3> Menyokong lekukan tab </h3> <p>Bila-bila masa anda mengedit kod, anda perlu boleh mengesot dan kod ini membolehkan kami menambah ruang apabila seseorang menekan tab, dan kemudian panggil mirror() sekali lagi untuk mengemas kini pratonton.<br> </p> <pre class="brush:php;toolbar:false">#editor { ... display: grid; grid-template: 1fr / 1fr; place-items: top; overflow: auto; ... } </pre> <p>Akhir sekali, kami menambah eventListener untuk input pada <textarea> dan kemas kini pratonton dengan mirror() pada setiap perubahan. Kemudian kami memanggil mirror() pada mulanya, sekiranya sudah ada kod dalam <textarea> pada pemuatan halaman. </p> <p>Itu sahaja! Jelas sekali, jika anda sedang mengedit beribu-ribu baris kod, anda mungkin mengalami masalah prestasi semasa mengemas kini semua kod yang diserlahkan sintaks itu. Satu cara untuk menambah baik idea ini ialah dengan mencipta penatal "maya" dan hanya menyerlahkan kod yang boleh dilihat dalam paparan bekas. Ini adalah bagaimana VsCode melakukan editor mereka. </p> <p>Jika anda ingin bermain-main dengan ini, anda boleh mencari<br> kod dan contoh yang berfungsi pada GitHub</p> <p>Atas ialah kandungan terperinci Editor kod CSS yang ringkas dan kebanyakannya. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!</p> </div> </div> <div id="377j5v51b" class="wzconShengming_sp"> <div id="377j5v51b" class="bzsmdiv_sp">Kenyataan Laman Web ini</div> <div>Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn</div> </div> </div> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="2507867629"></ins> <div id="377j5v51b" class="AI_ToolDetails_main4sR"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5902227090019525" data-ad-slot="3653428331" data-ad-format="auto" data-full-width-responsive="true"></ins> <!-- <div id="377j5v51b" class="phpgenera_Details_mainR4"> <div id="377j5v51b" class="phpmain1_4R_readrank"> <div id="377j5v51b" class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hotarticle2.png" alt="" /> <h2>Artikel Panas</h2> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottom"> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://m.miracleart.cn/ms/faq/1796821119.html" title="Panduan: bilah bintang simpan fail lokasi/simpan fail hilang/tidak menyimpan" class="phpgenera_Details_mainR4_bottom_title">Panduan: bilah bintang simpan fail lokasi/simpan fail hilang/tidak menyimpan</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <span>4 minggu yang lalu</span> <span>By DDD</span> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://m.miracleart.cn/ms/faq/1796827210.html" title="Oguri Cap Build Guide | Musume Derby Pretty" class="phpgenera_Details_mainR4_bottom_title">Oguri Cap Build Guide | Musume Derby Pretty</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <span>2 minggu yang lalu</span> <span>By Jack chen</span> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://m.miracleart.cn/ms/faq/1796828723.html" title="Agnes Tachyon Build Guide | Musume Derby Pretty" class="phpgenera_Details_mainR4_bottom_title">Agnes Tachyon Build Guide | Musume Derby Pretty</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <span>2 minggu yang lalu</span> <span>By Jack chen</span> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://m.miracleart.cn/ms/faq/1796821436.html" title="Dune: Awakening - Lanjutan Planetologist Quest Walkthrough" class="phpgenera_Details_mainR4_bottom_title">Dune: Awakening - Lanjutan Planetologist Quest Walkthrough</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <span>4 minggu yang lalu</span> <span>By Jack chen</span> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://m.miracleart.cn/ms/faq/1796821278.html" title="Tarikh Segala -galanya: Panduan Hubungan Dirk dan Harper" class="phpgenera_Details_mainR4_bottom_title">Tarikh Segala -galanya: Panduan Hubungan Dirk dan Harper</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <span>4 minggu yang lalu</span> <span>By Jack chen</span> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR3_more"> <a href="http://m.miracleart.cn/ms/article.html">Tunjukkan Lagi</a> </div> </div> </div> --> <div id="377j5v51b" class="phpgenera_Details_mainR3"> <div id="377j5v51b" class="phpmain1_4R_readrank"> <div id="377j5v51b" class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hottools2.png" alt="" /> <h2>Alat AI Hot</h2> </div> <div id="377j5v51b" class="phpgenera_Details_mainR3_bottom"> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://m.miracleart.cn/ms/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173410641626608.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undress AI Tool" /> </a> <div id="377j5v51b" class="phpmain_tab2_mids_info"> <a href="http://m.miracleart.cn/ms/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_title"> <h3>Undress AI Tool</h3> </a> <p>Gambar buka pakaian secara percuma</p> </div> </div> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://m.miracleart.cn/ms/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411540686492.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undresser.AI Undress" /> </a> <div id="377j5v51b" class="phpmain_tab2_mids_info"> <a href="http://m.miracleart.cn/ms/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_title"> <h3>Undresser.AI Undress</h3> </a> <p>Apl berkuasa AI untuk mencipta foto bogel yang realistik</p> </div> </div> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://m.miracleart.cn/ms/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411552797167.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Clothes Remover" /> </a> <div id="377j5v51b" class="phpmain_tab2_mids_info"> <a href="http://m.miracleart.cn/ms/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_title"> <h3>AI Clothes Remover</h3> </a> <p>Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.</p> </div> </div> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://m.miracleart.cn/ms/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411529149311.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Clothoff.io" /> </a> <div id="377j5v51b" class="phpmain_tab2_mids_info"> <a href="http://m.miracleart.cn/ms/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_title"> <h3>Clothoff.io</h3> </a> <p>Penyingkiran pakaian AI</p> </div> </div> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://m.miracleart.cn/ms/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173414504068133.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Video Face Swap" /> </a> <div id="377j5v51b" class="phpmain_tab2_mids_info"> <a href="http://m.miracleart.cn/ms/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_title"> <h3>Video Face Swap</h3> </a> <p>Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!</p> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR3_more"> <a href="http://m.miracleart.cn/ms/ai">Tunjukkan Lagi</a> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4"> <div id="377j5v51b" class="phpmain1_4R_readrank"> <div id="377j5v51b" class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hotarticle2.png" alt="" /> <h2>Artikel Panas</h2> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottom"> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://m.miracleart.cn/ms/faq/1796821119.html" title="Panduan: bilah bintang simpan fail lokasi/simpan fail hilang/tidak menyimpan" class="phpgenera_Details_mainR4_bottom_title">Panduan: bilah bintang simpan fail lokasi/simpan fail hilang/tidak menyimpan</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <span>4 minggu yang lalu</span> <span>By DDD</span> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://m.miracleart.cn/ms/faq/1796827210.html" title="Oguri Cap Build Guide | Musume Derby Pretty" class="phpgenera_Details_mainR4_bottom_title">Oguri Cap Build Guide | Musume Derby Pretty</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <span>2 minggu yang lalu</span> <span>By Jack chen</span> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://m.miracleart.cn/ms/faq/1796828723.html" title="Agnes Tachyon Build Guide | Musume Derby Pretty" class="phpgenera_Details_mainR4_bottom_title">Agnes Tachyon Build Guide | Musume Derby Pretty</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <span>2 minggu yang lalu</span> <span>By Jack chen</span> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://m.miracleart.cn/ms/faq/1796821436.html" title="Dune: Awakening - Lanjutan Planetologist Quest Walkthrough" class="phpgenera_Details_mainR4_bottom_title">Dune: Awakening - Lanjutan Planetologist Quest Walkthrough</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <span>4 minggu yang lalu</span> <span>By Jack chen</span> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://m.miracleart.cn/ms/faq/1796821278.html" title="Tarikh Segala -galanya: Panduan Hubungan Dirk dan Harper" class="phpgenera_Details_mainR4_bottom_title">Tarikh Segala -galanya: Panduan Hubungan Dirk dan Harper</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <span>4 minggu yang lalu</span> <span>By Jack chen</span> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR3_more"> <a href="http://m.miracleart.cn/ms/article.html">Tunjukkan Lagi</a> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR3"> <div id="377j5v51b" class="phpmain1_4R_readrank"> <div id="377j5v51b" class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hottools2.png" alt="" /> <h2>Alat panas</h2> </div> <div id="377j5v51b" class="phpgenera_Details_mainR3_bottom"> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://m.miracleart.cn/ms/toolset/development-tools/92" title="Notepad++7.3.1" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab96f0f39f7357.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Notepad++7.3.1" /> </a> <div id="377j5v51b" class="phpmain_tab2_mids_info"> <a href="http://m.miracleart.cn/ms/toolset/development-tools/92" title="Notepad++7.3.1" class="phpmain_tab2_mids_title"> <h3>Notepad++7.3.1</h3> </a> <p>Editor kod yang mudah digunakan dan percuma</p> </div> </div> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://m.miracleart.cn/ms/toolset/development-tools/93" title="SublimeText3 versi Cina" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97a3baad9677.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 versi Cina" /> </a> <div id="377j5v51b" class="phpmain_tab2_mids_info"> <a href="http://m.miracleart.cn/ms/toolset/development-tools/93" title="SublimeText3 versi Cina" class="phpmain_tab2_mids_title"> <h3>SublimeText3 versi Cina</h3> </a> <p>Versi Cina, sangat mudah digunakan</p> </div> </div> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://m.miracleart.cn/ms/toolset/development-tools/121" title="Hantar Studio 13.0.1" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97ecd1ab2670.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Hantar Studio 13.0.1" /> </a> <div id="377j5v51b" class="phpmain_tab2_mids_info"> <a href="http://m.miracleart.cn/ms/toolset/development-tools/121" title="Hantar Studio 13.0.1" class="phpmain_tab2_mids_title"> <h3>Hantar Studio 13.0.1</h3> </a> <p>Persekitaran pembangunan bersepadu PHP yang berkuasa</p> </div> </div> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://m.miracleart.cn/ms/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d0e0fc74683535.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Dreamweaver CS6" /> </a> <div id="377j5v51b" class="phpmain_tab2_mids_info"> <a href="http://m.miracleart.cn/ms/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_title"> <h3>Dreamweaver CS6</h3> </a> <p>Alat pembangunan web visual</p> </div> </div> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://m.miracleart.cn/ms/toolset/development-tools/500" title="SublimeText3 versi Mac" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d34035e2757995.png?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 versi Mac" /> </a> <div id="377j5v51b" class="phpmain_tab2_mids_info"> <a href="http://m.miracleart.cn/ms/toolset/development-tools/500" title="SublimeText3 versi Mac" class="phpmain_tab2_mids_title"> <h3>SublimeText3 versi Mac</h3> </a> <p>Perisian penyuntingan kod peringkat Tuhan (SublimeText3)</p> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR3_more"> <a href="http://m.miracleart.cn/ms/ai">Tunjukkan Lagi</a> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4"> <div id="377j5v51b" class="phpmain1_4R_readrank"> <div id="377j5v51b" class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hotarticle2.png" alt="" /> <h2>Topik panas</h2> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottom"> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://m.miracleart.cn/ms/faq/gmailyxdlrkzn" title="Di manakah pintu masuk log masuk untuk e-mel gmail?" class="phpgenera_Details_mainR4_bottom_title">Di manakah pintu masuk log masuk untuk e-mel gmail?</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>8638</span> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>17</span> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://m.miracleart.cn/ms/faq/java-tutorial" title="Tutorial Java" class="phpgenera_Details_mainR4_bottom_title">Tutorial Java</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1783</span> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>16</span> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://m.miracleart.cn/ms/faq/cakephp-tutor" title="Tutorial CakePHP" class="phpgenera_Details_mainR4_bottom_title">Tutorial CakePHP</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1728</span> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>56</span> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://m.miracleart.cn/ms/faq/laravel-tutori" title="Tutorial Laravel" class="phpgenera_Details_mainR4_bottom_title">Tutorial Laravel</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1579</span> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>28</span> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://m.miracleart.cn/ms/faq/php-tutorial" title="Tutorial PHP" class="phpgenera_Details_mainR4_bottom_title">Tutorial PHP</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1444</span> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>31</span> </div> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR3_more"> <a href="http://m.miracleart.cn/ms/faq/zt">Tunjukkan Lagi</a> </div> </div> </div> </div> </div> <div id="377j5v51b" class="Article_Details_main2"> <div id="377j5v51b" class="phpgenera_Details_mainL4"> <div id="377j5v51b" class="phpmain1_2_top"> <a href="javascript:void(0);" class="phpmain1_2_top_title">Related knowledge<img src="/static/imghw/index2_title2.png" alt="" /></a> </div> <div id="377j5v51b" class="phpgenera_Details_mainL4_info"> <div id="377j5v51b" class="phphistorical_Version2_mids"> <a href="http://m.miracleart.cn/ms/faq/1796823628.html" title="Apa itu 'menyekat CSS'?" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175069693197174.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Apa itu 'menyekat CSS'?" /> </a> <a href="http://m.miracleart.cn/ms/faq/1796823628.html" title="Apa itu 'menyekat CSS'?" class="phphistorical_Version2_mids_title">Apa itu 'menyekat CSS'?</a> <span id="377j5v51b" class="Articlelist_txts_time">Jun 24, 2025 am 12:42 AM</span> <p class="Articlelist_txts_p">CSS Blok halaman yang diberikan kerana pelayar melihat CSS dalam talian dan luaran sebagai sumber utama secara lalai, terutamanya dengan stylesheet yang diimport, header sejumlah besar CSS sebaris, dan gaya pertanyaan media yang tidak dapat dioptimumkan. 1. Ekstrak CSS kritikal dan membenamkannya ke HTML; 2. Kelewatan memuatkan CSS bukan kritikal melalui JavaScript; 3. Gunakan atribut media untuk mengoptimumkan pemuatan seperti gaya cetak; 4. Memampatkan dan menggabungkan CSS untuk mengurangkan permintaan. Adalah disyorkan untuk menggunakan alat untuk mengekstrak CSS utama, menggabungkan REL = "Preload" pemuatan asynchronous, dan menggunakan media yang ditangguhkan dengan munasabah untuk mengelakkan pemisahan yang berlebihan dan kawalan skrip kompleks.</p> </div> <div id="377j5v51b" class="phphistorical_Version2_mids"> <a href="http://m.miracleart.cn/ms/faq/1796822133.html" title="Luaran vs CSS Dalaman: Apakah pendekatan terbaik?" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175035152168797.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Luaran vs CSS Dalaman: Apakah pendekatan terbaik?" /> </a> <a href="http://m.miracleart.cn/ms/faq/1796822133.html" title="Luaran vs CSS Dalaman: Apakah pendekatan terbaik?" class="phphistorical_Version2_mids_title">Luaran vs CSS Dalaman: Apakah pendekatan terbaik?</a> <span id="377j5v51b" class="Articlelist_txts_time">Jun 20, 2025 am 12:45 AM</span> <p class="Articlelist_txts_p">Thebestapproachforcssdependonstantheproject'ssspecificneeds.forlargerprojects, externalcssisbetterduetomaintainabilityability;</p> </div> <div id="377j5v51b" class="phphistorical_Version2_mids"> <a href="http://m.miracleart.cn/ms/faq/1796821588.html" title="Adakah CSS saya mesti berada di bawah kes?" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175026415047262.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Adakah CSS saya mesti berada di bawah kes?" /> </a> <a href="http://m.miracleart.cn/ms/faq/1796821588.html" title="Adakah CSS saya mesti berada di bawah kes?" class="phphistorical_Version2_mids_title">Adakah CSS saya mesti berada di bawah kes?</a> <span id="377j5v51b" class="Articlelist_txts_time">Jun 19, 2025 am 12:29 AM</span> <p class="Articlelist_txts_p">Tidak, cssdoesnothavetobeinlowercase.however, menggunakanLowerCaseisRecommendorfendfor: 1) Consistencyandreadability, 2) Mengelakkaningerrorsinrelatedtechnologies, 3) potensiformanceBenefits, dan4) peningkatan yang lebih baik.</p> </div> <div id="377j5v51b" class="phphistorical_Version2_mids"> <a href="http://m.miracleart.cn/ms/faq/1796821998.html" title="Kepekaan kes CSS: Memahami apa yang penting" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175034936181156.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Kepekaan kes CSS: Memahami apa yang penting" /> </a> <a href="http://m.miracleart.cn/ms/faq/1796821998.html" title="Kepekaan kes CSS: Memahami apa yang penting" class="phphistorical_Version2_mids_title">Kepekaan kes CSS: Memahami apa yang penting</a> <span id="377j5v51b" class="Articlelist_txts_time">Jun 20, 2025 am 12:09 AM</span> <p class="Articlelist_txts_p">Cssismostlycase-insensitive, buturlsandfontfamilynamesarecase-sensitif.1) propertiesandvalueslikecolor: merah; arenotcase-sensitif.2) urlsmustmatchtheserver'scase, mis.,</p> </div> <div id="377j5v51b" class="phphistorical_Version2_mids"> <a href="http://m.miracleart.cn/ms/faq/1796828180.html" title="Apakah AutoPrefixer dan bagaimana ia berfungsi?" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175139012130913.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Apakah AutoPrefixer dan bagaimana ia berfungsi?" /> </a> <a href="http://m.miracleart.cn/ms/faq/1796828180.html" title="Apakah AutoPrefixer dan bagaimana ia berfungsi?" class="phphistorical_Version2_mids_title">Apakah AutoPrefixer dan bagaimana ia berfungsi?</a> <span id="377j5v51b" class="Articlelist_txts_time">Jul 02, 2025 am 01:15 AM</span> <p class="Articlelist_txts_p">AutoPrefixer adalah alat yang secara automatik menambah awalan vendor ke atribut CSS berdasarkan skop penyemak imbas sasaran. 1. Ia menyelesaikan masalah mengekalkan awalan secara manual dengan kesilapan; 2. Bekerja melalui borang pemalam postcss, menghuraikan CSS, menganalisis atribut yang perlu diawali, dan menjana kod mengikut konfigurasi; 3. Langkah-langkah penggunaan termasuk memasang pemalam, menetapkan senarai pelayar, dan membolehkan mereka dalam proses membina; 4. Nota termasuk tidak menambah awalan secara manual, menyimpan kemas kini konfigurasi, awalan tidak semua atribut, dan disyorkan untuk menggunakannya dengan preprocessor.</p> </div> <div id="377j5v51b" class="phphistorical_Version2_mids"> <a href="http://m.miracleart.cn/ms/faq/1796821606.html" title="Apakah kaunter CSS?" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175026444127039.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Apakah kaunter CSS?" /> </a> <a href="http://m.miracleart.cn/ms/faq/1796821606.html" title="Apakah kaunter CSS?" class="phphistorical_Version2_mids_title">Apakah kaunter CSS?</a> <span id="377j5v51b" class="Articlelist_txts_time">Jun 19, 2025 am 12:34 AM</span> <p class="Articlelist_txts_p">Csscounterscanautomaticallynumbersectionsandlists.1) useCounter-resettoinitialize, counter-incrementToinCrease, andCounter () orcounters () todisplayvalues.2) CombinWithjavascriptfordynamicContentToenSureAccurateupdates.</p> </div> <div id="377j5v51b" class="phphistorical_Version2_mids"> <a href="http://m.miracleart.cn/ms/faq/1796821580.html" title="CSS: Bilakah kes perkara (dan kapan tidak)?" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175026403168895.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="CSS: Bilakah kes perkara (dan kapan tidak)?" /> </a> <a href="http://m.miracleart.cn/ms/faq/1796821580.html" title="CSS: Bilakah kes perkara (dan kapan tidak)?" class="phphistorical_Version2_mids_title">CSS: Bilakah kes perkara (dan kapan tidak)?</a> <span id="377j5v51b" class="Articlelist_txts_time">Jun 19, 2025 am 12:27 AM</span> <p class="Articlelist_txts_p">Dalam CSS, nama pemilih dan atribut adalah sensitif kes, manakala nilai, warna yang dinamakan, URL, dan atribut tersuai adalah sensitif kes. 1. Nama pemilih dan atribut adalah kes-tidak sensitif, seperti warna latar belakang dan warna latar belakang adalah sama. 2. Warna heksadesimal dalam nilai adalah sensitif kes, tetapi warna bernama adalah sensitif kes, seperti merah dan merah tidak sah. 3. URL adalah sensitif kes dan boleh menyebabkan masalah pemuatan fail. 4. Sifat tersuai (pembolehubah) adalah sensitif kes, dan anda perlu memberi perhatian kepada konsistensi kes apabila menggunakannya.</p> </div> <div id="377j5v51b" class="phphistorical_Version2_mids"> <a href="http://m.miracleart.cn/ms/faq/1796827610.html" title="Apakah fungsi conic-gradient ()?" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175130377175874.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Apakah fungsi conic-gradient ()?" /> </a> <a href="http://m.miracleart.cn/ms/faq/1796827610.html" title="Apakah fungsi conic-gradient ()?" class="phphistorical_Version2_mids_title">Apakah fungsi conic-gradient ()?</a> <span id="377j5v51b" class="Articlelist_txts_time">Jul 01, 2025 am 01:16 AM</span> <p class="Articlelist_txts_p">Function-gradient () functionIncsscreatesculculargradientsthatrotatecolorstopsaroundroentroint.1.ISIISIDEALFORPIECHARTS, Progressindicators, Colorwheels, andDecorativeBackgrounds.2.itworksByDefiningColorStopsatSpecificles, OpsticalStarting</p> </div> </div> <a href="http://m.miracleart.cn/ms/web-designer.html" class="phpgenera_Details_mainL4_botton"> <span>See all articles</span> <img src="/static/imghw/down_right.png" alt="" /> </a> </div> </div> </div> </main> <footer> <div id="377j5v51b" class="footer"> <div id="377j5v51b" class="footertop"> <img src="/static/imghw/logo.png" alt=""> <p>Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！</p> </div> <div id="377j5v51b" class="footermid"> <a href="http://m.miracleart.cn/ms/about/us.html">Tentang kita</a> <a href="http://m.miracleart.cn/ms/about/disclaimer.html">Penafian</a> <a href="http://m.miracleart.cn/ms/update/article_0_1.html">Sitemap</a> </div> <div id="377j5v51b" class="footerbottom"> <p> ? php.cn All rights reserved </p> </div> </div> </footer> <input type="hidden" id="verifycode" value="/captcha.html"> <link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all' /> <footer> <div class="friendship-link"> <p>感谢您访问我们的网站，您可能还对以下资源感兴趣：</p> <a href="http://m.miracleart.cn/" title="国产av日韩一区二区三区精品">国产av日韩一区二区三区精品</a> <div class="friend-links"> </div> </div> </footer> <script> (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> </body><div id="btlxt" class="pl_css_ganrao" style="display: none;"><pre id="btlxt"><i id="btlxt"><nobr id="btlxt"><dfn id="btlxt"></dfn></nobr></i></pre><p id="btlxt"><sup id="btlxt"><form id="btlxt"><nobr id="btlxt"></nobr></form></sup></p><listing id="btlxt"><dfn id="btlxt"></dfn></listing><p id="btlxt"><var id="btlxt"><b id="btlxt"><mark id="btlxt"></mark></b></var></p><strike id="btlxt"><strong id="btlxt"></strong></strike><thead id="btlxt"><progress id="btlxt"></progress></thead><em id="btlxt"><legend id="btlxt"><sup id="btlxt"><label id="btlxt"></label></sup></legend></em><th id="btlxt"><tt id="btlxt"><progress id="btlxt"><form id="btlxt"></form></progress></tt></th><menuitem id="btlxt"><span id="btlxt"></span></menuitem><progress id="btlxt"><dl id="btlxt"><pre id="btlxt"><dfn id="btlxt"></dfn></pre></dl></progress><acronym id="btlxt"></acronym><var id="btlxt"></var><optgroup id="btlxt"><output id="btlxt"><sub id="btlxt"><thead id="btlxt"></thead></sub></output></optgroup><video id="btlxt"></video><small id="btlxt"></small><u id="btlxt"><ins id="btlxt"></ins></u><listing id="btlxt"></listing><label id="btlxt"><nobr id="btlxt"><em id="btlxt"><meter id="btlxt"></meter></em></nobr></label><strong id="btlxt"></strong><var id="btlxt"><form id="btlxt"></form></var><dfn id="btlxt"><form id="btlxt"></form></dfn><listing id="btlxt"></listing><mark id="btlxt"><address id="btlxt"></address></mark><ruby id="btlxt"><thead id="btlxt"><big id="btlxt"><acronym id="btlxt"></acronym></big></thead></ruby><track id="btlxt"><tt id="btlxt"></tt></track><acronym id="btlxt"><legend id="btlxt"></legend></acronym><style id="btlxt"><listing id="btlxt"><dfn id="btlxt"><ruby id="btlxt"></ruby></dfn></listing></style><output id="btlxt"><sub id="btlxt"><strike id="btlxt"><strong id="btlxt"></strong></strike></sub></output><form id="btlxt"><video id="btlxt"><address id="btlxt"><meter id="btlxt"></meter></address></video></form><style id="btlxt"></style><ins id="btlxt"><address id="btlxt"></address></ins><menuitem id="btlxt"></menuitem><p id="btlxt"></p><progress id="btlxt"><form id="btlxt"><legend id="btlxt"><var id="btlxt"></var></legend></form></progress><style id="btlxt"><nobr id="btlxt"></nobr></style><thead id="btlxt"></thead><font id="btlxt"><meter id="btlxt"></meter></font><b id="btlxt"></b><rp id="btlxt"><font id="btlxt"><div id="btlxt"><ol id="btlxt"></ol></div></font></rp><mark id="btlxt"><dl id="btlxt"></dl></mark><var id="btlxt"></var><meter id="btlxt"></meter><strike id="btlxt"><strong id="btlxt"><pre id="btlxt"><track id="btlxt"></track></pre></strong></strike><strike id="btlxt"><label id="btlxt"></label></strike><pre id="btlxt"><track id="btlxt"></track></pre><thead id="btlxt"><label id="btlxt"></label></thead><rp id="btlxt"><em id="btlxt"><meter id="btlxt"><span id="btlxt"></span></meter></em></rp><em id="btlxt"><meter id="btlxt"><ol id="btlxt"><strike id="btlxt"></strike></ol></meter></em><dfn id="btlxt"></dfn><ins id="btlxt"><address id="btlxt"><p id="btlxt"><sup id="btlxt"></sup></p></address></ins></div> </html>