Kiat CSS yang hilang cohost.org – Beragampengetahuan

Jika Anda belum pernah mendengar tentang cohost.org, Anda akan dimaafkan. Situs media sosial seperti Tumblr yang disesuaikan, dan datang lagi. Halaman pendaratan Peach and Maroon Cohost dirilis pada Juni 2022 pada Juni 2022 dan berjanji akan “dirilis, tetapi lebih baik”. Hanya dua tahun kemudian, pada bulan September 2024, situs ini mengumumkan penutupannya, dengan penciptanya mengutip masalah burnout dan pendanaan. Hari ini, servernya telah menghilang selamanya. Tautan apa pun ke cohost.org mengarahkan kembali ke arsip mesin Wayback yang lambat namun komprehensif.

Halaman arahan Cohost.org, terdiri dari daging telur tercinta kami.

Meskipun hidup saya singkat, saya memiliki keyakinan bahwa co-host memenuhi janjinya. Ini sebagian besar disebabkan oleh basis penggunanya, terutama terdiri dari kreativitas web niche dan teman -teman mereka, banyak dari mereka telah memandang “rilis” sebagai bentuk seni. Pengguna ini tertarik oleh desain anti-kapitalis yang diselenggarakan host yang membuatnya berbeda dari alternatif arus utama. Situs ini tidak memiliki jumlah iklan dan pengikut, semua umpan diatur murni dalam urutan kronologis, dan antarmuka pos bahkan mendukung subset HTML.

Ini adalah fungsi terakhir yang mengintegrasikan komunitasnya sendiri. Untuk alasan keamanan, setiap posting yang menggunakan HTML dikirimkan melalui desinfektan untuk menghapus elemen jahat atau cacat. Namun, tidak seperti kebanyakan situs web, desinfektan Cohost sangat longgar. Sebagian besar tag dan atribut diizinkan – paling terkenal gaya inline CSS dari elemen apa pun.

Pengguna akan segera dapat memahami peluang kreatif yang bersembunyi dalam mode “posting baru” Cophost yang sederhana. Dalam waktu 48 jam setelah pengungkapan publik, komunitas yang masih muda menemukan cara menggunakan puisi untuk menerbitkan puisi <details> Mark, akan memulai 1999 dan mengakhiri kembali permainan Warioware cepat. Kami menyebut posting ini “kejahatan CSS” dan orang -orang yang membuat mereka “penjahat CSS.” Pengembang dari tuan rumah yang sama tidak memiliki rencana dan telah menciptakan lingkungan untuk komunitas CSS.

Dalam posting ini, saya akan menunjukkan kepada Anda beberapa peretasan yang kami temukan saat mencoba mendorong pembatasan dukungan HTML Cophost. Jika Anda berani menggunakan ini, jangan sampai Anda diberi label sebagai penjahat CSS juga.

Width Hacker

Banyak penjahat CSS didukung oleh teknologi yang oleh pengguna @CornCycle disebut “peretas lebar”. Digabungkan <details> Elemen dan CSS calc() Fitur, kita bisa mendapatkan beberapa fitur yang sangat liar: kunci kombinasi, permainan pencocokan ubin, gerakan top-down gaya Zelda, daftarnya berlanjut.

Jika Anda telah berada di dunia CSS untuk sementara waktu, ada kemungkinan besar Anda akan terkena hack kotak centang lama. Dengan menggabungkan penggunaan kotak centang kreatif, tag, dan pemilih CSS, Anda dapat mencapai berbagai hal menggunakan fitur sakelar dari kotak centang. Area kaset, dorong terbuka untuk beralih, menu tarik-turun, dll.

Namun, karena peretasan ini membutuhkan pemilih CSS, ini berarti kami tidak dapat menggunakannya pada host parse – ingat, kami hanya memiliki gaya inline. Sebaliknya, kami menggunakan elemen yang relatif baru <details> Dan <summary>. Elemen -elemen ini memberikan logika visibilitas yang sama, tetapi sekarang langsung dalam HTML. Tidak diperlukan CSS aneh.

Elemen -elemen ini bekerja seperti ini: semua anak <details> Elemen default tersembunyi kecuali <summary> elemen. Saat Anda mengklik ringkasan, itu “membuka” elemen detail orang tua untuk membuat anak -anaknya terlihat.

Kami dapat menambahkan berbagai gaya ke elemen -elemen ini untuk membuat contoh ini lebih menarik. Di bawah ini, saya menata elemen komposisi untuk menciptakan efek menerangi tombol saat diklik.

Ini dengan memberi <summary> Elemen -elemennya adalah posisi dan ukuran tetap, warna latar belakang abu -abu dan perbatasan di awal agar terlihat seperti tombol. Saudara kandung saat diklik <div> Cakupan terungkap <summary> Dengan latar belakang dan perbatasan merahnya sendiri. Biasanya ini <div> Akan memblokir acara klik lebih lanjut, tetapi saya telah memberikan pernyataan pointer-events: none. Sekarang semua klik diteruskan ke kanan <summary> Elemen berikut memungkinkan Anda untuk menutup tombol.

Semuanya indah, tetapi pada akhirnya sama seperti sebelumnya: beralih atau matikan sesuatu. Ini hanya dua negara bagian. Jika kami ingin membuat game dan alat lainnya, kami mungkin ingin mewakili ratusan negara bagian.

Lebar tersedia untuk kita. Pertimbangkan contoh berikut:

Dalam contoh ini, tiga <details> Elemen hidup dalam satu inline-flex wadah. Karena semuanya <summary> Elemen adalah posisi mutlak, lebar masing -masing <details> Semua elemen nol saat ditutup.

Sekarang, ketiganya <details> Ada yang kecil <div> masuk. Anak pertama memiliki lebar 1pxanak kedua 2pxlebar ketiga 4px. Ketika a <details> Elemen dihidupkan, ia mengungkapkan hiddennessnya <div>menyebabkan lebar Anda sendiri meningkat. Ini meningkat inline-flex wadah. Karena lebar wadah adalah jumlah anak -anaknya, ini berarti lebarnya Korespondensi Langsung Untuk spesifik <details> Elemen terbuka.

Misalnya, jika itu hanya yang pertama dan ketiga <details> Itu terbuka, inline-flex Wadah akan memiliki lebar 1px + 4px = 5px. Sebaliknya, jika inline-flex Wadahnya 2px Lebar, kita bisa menyimpulkan satu -satunya terbuka <details> Elemen adalah yang kedua. Dengan trik ini, kami berhasil membuat kode kedelapan negara dalam tiga negara <details> Masukkan lebar elemen wadah.

Ini keren. Mungkin kita bisa menggunakannya sebagai elemen dari beberapa jenis permainan puzzle? Jika kombinasi tombol yang benar diperiksa, kami dapat menampilkan pesan rahasia. Tapi apa yang harus kita lakukan? Bagaimana kita hanya menampilkan pesan rahasia untuk lebar tertentu dari wadah div itu?

Dalam codepen di sebelumnya saya menambahkan pesan rahasia untuk dua div bersarang. Saat ini, pesan ini selalu terlihat – dilengkapi dengan daftar yang harus dilakukan yang mengingatkan kami untuk mengimplementasikan logika untuk menyembunyikannya kecuali kombinasi yang benar ditetapkan.

Anda mungkin bertanya -tanya mengapa kami menggunakan dua div bersarang untuk pesan sederhana seperti itu. Ini karena kami akan menggunakan metode khusus untuk menyembunyikan pesan: kami akan membuat lebar induk div.secret adalah nol. Karena overflow: hidden Penggunaan properti, anak -anak div.message Akan dipotong sehingga tidak bisa dilihat.

Sekarang kami siap mengimplementasikan logika pesan rahasia kami. Berkat fakta bahwa persentase relatif terhadap orang tua, kami dapat menggunakan 100% Sebagai stand-in untuk lebar orang tua. Lalu kita bisa membangun CSS yang kompleks calc() Formulanya adalah 350px Jika wadah div adalah ukuran target kami, dan 0px jika tidak. Dengan cara ini, pesan rahasia kami hanya dapat dilihat ketika tombol tengah aktif dan yang lainnya tidak aktif. Cobalah!

Ini sangat rumit calc() Fungsi untuk mengontrol lebar Div rahasia memiliki diagram berikut:

Anda dapat melihat bahwa ini adalah kurva linier piecewise, yang dibangun oleh banyak min/max. Bagian -bagian ini ditempatkan pada posisi yang benar sehingga saat div wadah 2px– Kami telah menentukan bahwa hanya ketika hanya tombol kedua yang aktif.

Varian teknologi ini dapat digunakan untuk mengimplementasikan berbagai game yang mengejutkan. Ini adalah menara game Hanoi yang saya buat, yang menggunakan lebar dan tinggi untuk melacak status game.

Animasi SVG

Sejauh ini, kami telah melihat beberapa fitur dasar untuk mengimplementasikan permainan. Tetapi jika kami ingin permainan kami terlihat OKE? Apa yang harus dilakukan jika kita ingin menambahkan ✨animasi? Percaya atau tidak, ini sebenarnya sepenuhnya mungkin untuk menggunakan fungsionalitas SVG dalam inline CS.

SVG (Extensible Vector Graphics) adalah format gambar berbasis XML yang digunakan untuk menyimpan gambar vektor. Menikmati dukungan luas di internet – Anda bisa <img> Elemen atau URL background-image Properti, dll.

Seperti html, file svg elemen. Untuk SVG, elemen -elemen ini serupa <rect>,,,,, <circle>Dan <text>untuk beberapa nama. Elemen -elemen ini dapat memiliki berbagai sifat yang ditentukan seperti warna pengisian, lebar stroke, dan keluarga font.

Fitur SVG yang tidak banyak diketahui adalah termasuk <style> Blok yang digunakan untuk mengonfigurasi atribut elemen -elemen ini. Dalam contoh berikut, SVG digunakan sebagai latar belakang untuk div. Di SVG itu adalah satu <style> mendirikan fillWarnanya <circle> tiba red.

Angka genap Kurang dikenal Fungsi SVG adalah gayanya dapat digunakan Pertanyaan Media. Ukuran yang digunakan oleh pertanyaan ini adalah ukuran div, yang merupakan latar belakang.

Dalam contoh berikut, kami memiliki yang signifikan <div> Dengan latar belakang SVG. Di dalam SVG adalah kueri media yang akan mengubah warna pengisiannya <circle> tiba blue Saat lebar melebihi 100px. Raih pegangan yang diubah ukurannya di sudut kanan bawah dan seret lingkaran untuk berubah menjadi biru.

Sayangnya, karena pengubahan ukuran operasi tidak terlalu berguna pada perangkat seluler, ini dan beberapa kata kode berikutnya paling berpengalaman di desktop.

Ini adalah teknologi yang sangat kuat. Dengan mencampurnya dengan retasan lebar, kita dapat menyandikan keadaan permainan atau gizmo dalam lebar gambar latar belakang SVG. SVG kemudian dapat menampilkan atau menyembunyikan elemen tertentu sesuai dengan status game yang sesuai melalui kueri media.

Tapi saya jamin animasinya. Jadi, bagaimana ini bisa dilakukan? Ternyata Anda dapat menggunakan animasi CSS Di dalam SVGS. Dengan menggunakan CSS transition Properti, kita dapat membuat transisi warna yang halus red tiba blue.

Luar biasa! Namun, pastikan untuk meninjau kode sumber dengan cermat sebelum Anda mencobanya sendiri. Anda akan melihat saya harus menambahkan 1×1pxelemen di luar layar dengan ID #hack. Elemen ini memiliki animasi berkelanjutan yang sangat sederhana (hampir tidak jelas). “Animasi virtual” seperti ini diperlukan untuk memotong deteksi kesalahan animasi SVG oleh beberapa browser web. Tanpa peretas itu, kami transition Properti tidak akan terus bekerja.

Untuk bersenang -senang, mari kita gabungkan teknik dengan contoh pesan rahasia sebelumnya. Alih -alih mengganti lebar pesan rahasia antara nilai 0px Dan 350pxSaya sudah menyesuaikan rumus perhitungan sehingga pesan rahasia biasanya 350px,menjadi 351px Jika kombinasi yang benar diatur.

Pesan Rahasia sekarang hanya latar belakang SVG, bukan HTML/CSS <text> Elemen itu mengatakan “pesan rahasia”. Menggunakan kueri media, kami mengubah skala konversi ini <text> Nol kecuali div adalah nol 351px. Dan transition Menerapkan properti, kami mendapatkan transisi yang lancar antara kedua status ini.

Klik tombol tengah untuk mengaktifkan pesan rahasia:

Pengguna pertama dalam posting ini untuk menemukan kueri media yang menggunakan kueri media di latar belakang SVG adalah @ticky. Saya tidak ingat siapa yang tahu mereka bisa hidup, tetapi saya menggunakan kuis ini dengan sangat luas, yang memberi tahu Anda jenis tanah apa yang Anda inginkan jika Anda seorang cacing.

Meringkaskan

Sekarang semuanya akan. Saya tidak menyentuh beberapa teknik – yaitu kejenakaan lucu resize milik. Jika Anda ingin menjelajahi dunia kejahatan CSS lebih lanjut, saya sarankan Anda merekomendasikan LinkDump yang sangat baik ini dari YellowFterLife, atau ulasan video ini dari Rebane2001.

Selalu menyedihkan untuk menggambarkan masa lalu. Ini benar -benar tempat yang ajaib dan saya pikir saya tidak bisa menyampaikan perasaan mencapai kanan atas. Cara terbaik yang bisa saya lakukan adalah membagikan tips CSS yang hilang yang kami usulkan: kami menemukan ketika “dirilis, tetapi lebih baik”.