Bagaimana cara menyalin situs web dari html dan css?

Saya akhirnya menemukan waktu untuk membuat alat ini. Anda dapat menginstal SnappySnippet dari Github. Ini memungkinkan ekstraksi HTML+CSS yang mudah dari simpul DOM yang ditentukan (terakhir diperiksa). Selain itu, Anda dapat mengirim kode langsung ke CodePen atau JSFiddle. Menikmati

• membersihkan HTML (menghapus atribut yang tidak perlu, memperbaiki indentasi)
• mengoptimalkan CSS agar dapat dibaca
• sepenuhnya dapat dikonfigurasi (semua filter dapat dimatikan)
• bekerja dengan ::before dan ::after elemen semu
• UI yang bagus berkat proyek Bootstrap & Flat-UI

SnappySnippet adalah open source, dan Anda dapat menemukan kodenya di GitHub

Karena saya telah belajar cukup banyak saat membuat ini, saya memutuskan untuk membagikan beberapa masalah yang saya alami dan solusi saya kepada mereka, mungkin seseorang akan menganggapnya menarik

Upaya pertama - getMatchedCSSRules()

Awalnya saya sudah mencoba mengambil aturan CSS asli (berasal dari file CSS di situs web). Cukup luar biasa, ini sangat sederhana berkat window.getMatchedCSSRules(), namun, itu tidak berhasil dengan baik. Masalahnya adalah kami hanya mengambil sebagian dari pemilih HTML dan CSS yang cocok dengan konteks keseluruhan dokumen, yang tidak cocok lagi dengan konteks potongan HTML. Karena mem-parsing dan memodifikasi penyeleksi sepertinya bukan ide yang bagus, saya menyerah pada upaya ini

Upaya kedua - getComputedStyle()

Kemudian, saya mulai dari sesuatu yang disarankan oleh @CollectiveCognition - getComputedStyle(). Namun, saya benar-benar ingin memisahkan CSS dari HTML alih-alih menyisipkan semua gaya

Masalah 1 - memisahkan CSS dari HTML

Solusinya di sini tidak terlalu indah tetapi cukup mudah. Saya telah menetapkan ID untuk semua node di subtree yang dipilih dan menggunakan ID tersebut untuk membuat aturan CSS yang sesuai

Masalah 2 - menghapus properti dengan nilai default

Menetapkan ID ke node bekerja dengan baik, namun saya menemukan bahwa setiap aturan CSS saya memiliki ~300 properti yang membuat seluruh CSS tidak dapat dibaca
Ternyata getComputedStyle() mengembalikan semua kemungkinan properti dan nilai CSS yang dihitung untuk elemen yang diberikan. Beberapa di antaranya kosong, beberapa memiliki nilai default browser. Untuk menghapus nilai default, saya harus mendapatkannya dari browser terlebih dahulu (dan setiap tag memiliki nilai default yang berbeda). Solusinya adalah membandingkan gaya elemen yang berasal dari situs web dengan elemen yang sama yang dimasukkan ke dalam kosong. Logikanya di sini adalah bahwa tidak ada style sheet dalam kosong, jadi setiap elemen yang saya tambahkan hanya memiliki gaya browser default. Dengan cara ini saya dapat menyingkirkan sebagian besar properti yang tidak penting

Masalah 3 - hanya menyimpan properti steno

Hal berikutnya yang saya temukan adalah bahwa properti yang memiliki persamaan steno tidak perlu dicetak (mis. g. ada _______________ lalu _______________, _______________ utd. )
Untuk mengatasi ini, saya cukup membuat daftar properti yang memiliki persamaan steno dan memfilternya dari hasil

Masalah 4 - menghapus properti awalan

Jumlah properti di setiap aturan secara signifikan lebih rendah setelah operasi sebelumnya, tetapi saya telah menemukan bahwa saya masih memiliki banyak ::after0 properti awalan yang belum pernah saya dengar (::after1? ::after2?)
Saya bertanya-tanya apakah saya harus menyimpan salah satu dari properti ini karena beberapa di antaranya tampak berguna (::after3, ::after4 dll. ). Saya belum menemukan cara untuk memverifikasi ini, dan karena saya tahu bahwa sebagian besar properti ini hanyalah sampah, saya memutuskan untuk menghapus semuanya.

Masalah 5 - menggabungkan aturan CSS yang sama

Masalah berikutnya yang saya temukan adalah bahwa aturan CSS yang sama berulang-ulang (mis. g. untuk setiap dengan gaya yang sama persis ada aturan yang sama dalam keluaran CSS yang dibuat)
Ini hanyalah masalah membandingkan aturan satu sama lain dan menggabungkannya yang memiliki kumpulan properti dan nilai yang persis sama. Akibatnya, alih-alih ::after_6 saya mendapat ::after7

Masalah 6 - membersihkan dan memperbaiki indentasi HTML

Karena saya senang dengan hasilnya, saya pindah ke HTML. Itu tampak berantakan, terutama karena properti ::after8 membuatnya tetap diformat persis seperti yang dikembalikan dari server
Satu-satunya hal yang dibutuhkan kode HTML dari ::after_8 adalah pemformatan ulang kode sederhana. Karena ini tersedia di setiap IDE, saya yakin ada perpustakaan JavaScript yang melakukan hal itu. Dan ternyata saya benar (jquery-clean). Terlebih lagi, saya mendapatkan tambahan penghapusan atribut yang tidak perlu (window.getMatchedCSSRules()0, window.getMatchedCSSRules()1 dll. )

Masalah 7 - filter merusak CSS

Karena ada kemungkinan bahwa dalam beberapa keadaan, filter yang disebutkan di atas dapat merusak CSS dalam cuplikan, saya menjadikan semuanya opsional. Anda dapat menonaktifkannya dari menu Pengaturan

Bagaimana cara menyalin seluruh halaman Web dalam HTML?

Bagaimana cara menyalin seluruh CSS situs web?

Apakah ada cara untuk menyalin seluruh situs web?

Bagaimana Anda menyalin situs web dan menjadikannya milik Anda sendiri?