Menghilangkan sumber pemblokiran render css stack overflow

Question

Stack Overflow merayakan pencapaian situs dengan confetti di banyak tempat. Itu berarti sudah waktunya untuk memformalkannya dalam sistem desain kami

Table of Contents Show

Seni sebelumnya
Penulisan SVG
Mendukung gerakan yang berkurang
Bagaimana cara menyingkirkan sumber pemblokiran render di CSS?
Bagaimana cara saya menyingkirkan plugin pemblokiran Render?
Mengapa pemblokiran render CSS?
Bagaimana cara menghilangkan sumber pemblokiran render di WordPress tanpa plugin?

Aaron Shekey Desainer Produk Utama, Sistem Desain

Cukup sering di produk kami, kami akan memiliki popover atau modals perayaan. Selamat. Anda melakukan hal itu. Kerja yang baik. Anda mendapatkan fiturnya. Hore

Di Tumpukan sistem desain kami, kami baru-baru ini mengirimkan cara portabel yang dapat digunakan kembali untuk menampilkan confetti perayaan

Pertama kali kami perlu menunjukkan beberapa confetti, kami hanya menyertakan SVG confetti yang dirender secara statis di latar belakang, melakukan yang terbaik untuk memposisikannya keluar dari teks, dan melanjutkan hidup kami. Itu terlihat seperti ini

Hanya beberapa bulan kemudian, kami menemukan pendekatan yang sama ini dilakukan 12 kali di seluruh produk kami. Setiap iterasi sedikit berbeda. Segera kami memiliki variasi lain seperti confetti-bold.svg

Kita harus konsisten dalam pendekatan kita terhadap confetti yang dapat digunakan kembali, portabel, dan mungkin yang paling penting, didokumentasikan. Waktu untuk meresmikan

Seni sebelumnya

Seperti yang diketahui oleh banyak pengguna Stack Overflow, cara terbaik untuk memulai adalah membuat contoh yang baik. Untungnya, ada banyak contoh confetti dalam produk di internet. Aplikasi seperti Bamboo menggunakannya untuk peringatan dan ulang tahun. Carta menggunakan confetti untuk merayakan opsi berolahraga

Beberapa merender sesuatu dalam JavaScript, yang lain sebagai gif animasi. Ada beberapa yang merender seluruh adegan WebGL dalam Tiga. JS

Untuk Stack Overflow, kami membutuhkan sesuatu yang seportabel mungkin dan berjalan sedekat mungkin dengan HTML & CSS asli. Kami tidak ingin memperkenalkan dependensi apa pun di sini. Kami juga tidak ingin menginisialisasi beberapa JS setiap kali kami ingin menampilkannya. Mengandalkan ketergantungan ekstra mendiskualifikasi pendekatan yang kami lihat di seluruh web

Saat mencari solusi untuk masalah umum, seringkali saya akan mulai dari Codepen. Ini membawa saya ke Pena Andy O'Brien

Pendekatan ini sederhana dan elegan, dan animasi berputar. Ini menggunakan CSS yang dihasilkan Sass untuk menganimasikan elemen DOM individual. Itu juga terlihat sangat dekat dengan iterasi terbaru desainer kami Vivian Zhang tentang estetika confetti

Saya menggunakan Codepen untuk mulai memahami pendekatannya. Saya men-tweak warna dan mulai mengotak-atik variabel waktu. Begitu saya memahami pendekatannya, saya menyelesaikan warna, dan menempatkan elemen confetti di dalam salah satu modals kami

Tetapi pendekatan ini memiliki beberapa masalah. Dalam berbagai konteks kami, kami tidak memiliki komponenisasi pada skala yang kami inginkan. Ini berarti teknisi kami harus menyalin dan menempelkan selusin div confetti-piece pembuat roti dan memastikan untuk mengelola indeks-z dan peristiwa penunjuk dari confetti yang dihasilkan. Pendekatan ini juga menggunakan pemosisian absolut dan kotak fleksibel untuk mendistribusikan potongan confetti ke seluruh, artinya jika Anda ingin menggunakannya pada wadah yang lebar, itu akan meregang alih-alih ubin.

Kami yakin menyukai estetika

Saya bertaruh alih-alih mengirimkan sebagai elemen DOM, kami dapat menempatkan semua ini di dalam SVG dan mengirimkannya sebagai gambar latar belakang, memberi kami kontrol yang jauh lebih besar atas pemosisian, ukuran, dan pengulangan

Penulisan SVG

Oke, jadi SVG sebagai gambar latar belakang? . Pertama, saya harus membuat elemen SVG untuk menampung potongan confetti. Ini hanya masalah mendistribusikan beberapa persegi panjang di atas kanvas dan memilih beberapa ukuran yang kita suka. Ini hanya menggantikan DOM kami yang kami jelajahi di Codepens sebelumnya untuk portabilitas. Saya menggunakan Figma untuk menggambar ini sebagai penghemat waktu, tetapi ini semua bisa ditulis dengan tangan. Inilah hasil akhirnya

<svg width="600" height="90" viewBox="0 0 600 90" fill="none" xmlns="http://www.w3.org/2000/svg">
    <rect x="42" y="0" width="6" height="10"/>
    <rect x="84" y="0" width="6" height="10"/>
    <rect x="126" y="0" width="5" height="13"/>
    <rect x="168" y="0" width="5" height="13"/>
    <rect x="210" y="0" width="6" height="10"/>
    <rect x="252" y="0" width="5" height="13"/>
    <rect x="294" y="0" width="6" height="10"/>
    <rect x="336" y="0" width="5" height="13"/>
    <rect x="378" y="0" width="5" height="13"/>
    <rect x="420" y="0" width="6" height="10"/>
    <rect x="462" y="0" width="6" height="10"/>
    <rect x="504" y="0" width="5" height="13"/>
    <rect x="546" y="0" width="6" height="10"/>
</svg>

Sekarang setelah saya memiliki elemen SVG, saya dapat menyematkan CSS ke dalamnya dan browser akan melakukan tugasnya. Pendekatan asli Andy adalah mewarnai, memutar, dan memposisikan berbagai elemen confetti menggunakan pemilih

<svg>
    <style type="text/css">...</style>
    <rect />
</svg>

0 CSS. Awalnya, SVG saya terstruktur seperti itu

<svg>
    <style type="text/css">...</style>
    <rect />
</svg>

_

Oh. Tapi sekarang pemilih

<svg>
    <style type="text/css">...</style>
    <rect />
</svg>

0 CSS semuanya dimatikan satu karena CSS menghitung elemen

<svg>
    <style type="text/css">...</style>
    <rect />
</svg>

2 sebagai anak. Saya kira kita akan memindahkannya ke bawah

Selain itu, fungsi Sass tidak akan berfungsi di dalam SVG kita, jadi kita harus mengompilasi sebagai CSS dan menempelkannya ke dalam SVG kita. Codepen dapat menangani kompilasi untuk kami, dan saya dapat menyalin dan menempel. Ini menjadi sedikit aneh. 😛

<svg width="600" height="90" viewBox="0 0 600 90" fill="none" xmlns="http://www.w3.org/2000/svg">
    <rect x="42" y="0" width="6" height="10"/>
    <rect x="84" y="0" width="6" height="10"/>
    <rect x="126" y="0" width="5" height="13"/>
    <rect x="168" y="0" width="5" height="13"/>
    <rect x="210" y="0" width="6" height="10"/>
    <rect x="252" y="0" width="5" height="13"/>
    <rect x="294" y="0" width="6" height="10"/>
    <rect x="336" y="0" width="5" height="13"/>
    <rect x="378" y="0" width="5" height="13"/>
    <rect x="420" y="0" width="6" height="10"/>
    <rect x="462" y="0" width="6" height="10"/>
    <rect x="504" y="0" width="5" height="13"/>
    <rect x="546" y="0" width="6" height="10"/>

    <style type="text/css">
        rect {
            opacity: 0;
        }
        rect:nth-child(1) {
            transform: rotate(-145deg);
            animation: blast 700ms infinite ease-out;
            animation-delay: 88ms;
            animation-duration: 631ms;
        }
        rect:nth-child(2) {
            transform: rotate(164deg);
            animation: blast 700ms infinite ease-out;
            animation-delay: 131ms;
            animation-duration: 442ms;
        }
        rect:nth-child(3) {
            transform: rotate(4deg);
            animation: blast 700ms infinite ease-out;
            animation-delay: 92ms;
            animation-duration: 662ms;
        }
        rect:nth-child(4) {
            transform: rotate(-175deg);
            animation: blast 700ms infinite ease-out;
            animation-delay: 17ms;
            animation-duration: 593ms;
        }
        rect:nth-child(5) {
            transform: rotate(-97deg);
            animation: blast 700ms infinite ease-out;
            animation-delay: 122ms;
            animation-duration: 476ms;
        }
        rect:nth-child(6) {
            transform: rotate(57deg);
            animation: blast 700ms infinite ease-out;
            animation-delay: 271ms;
            animation-duration: 381ms;
        }
        rect:nth-child(7) {
            transform: rotate(-46deg);
            animation: blast 700ms infinite ease-out;
            animation-delay: 131ms;
            animation-duration: 619ms;
        }
        rect:nth-child(8) {
            transform: rotate(-65deg);
            animation: blast 700ms infinite ease-out;
            animation-delay: 85ms;
            animation-duration: 668ms;
        }
        rect:nth-child(9) {
            transform: rotate(13deg);
            animation: blast 700ms infinite ease-out;
            animation-delay: 128ms;
            animation-duration: 377ms;
        }
        rect:nth-child(10) {
            transform: rotate(176deg);
            animation: blast 700ms infinite ease-out;
            animation-delay: 311ms;
            animation-duration: 508ms;
        }
        rect:nth-child(11) {
            transform: rotate(108deg);
            animation: blast 700ms infinite ease-out;
            animation-delay: 108ms;
            animation-duration: 595ms;
        }
        rect:nth-child(12) {
            transform: rotate(62deg);
            animation: blast 700ms infinite ease-out;
            animation-delay: 105ms;
            animation-duration: 375ms;
        }
        rect:nth-child(13) {
            transform: rotate(16deg);
            animation: blast 700ms infinite ease-out;
            animation-delay: 149ms;
            animation-duration: 491ms;
        }
        rect:nth-child(odd) {
            fill: #65BB5C;
        }
        rect:nth-child(even) {
            z-index: 1;
            fill: #33AAFF;
        }
        rect:nth-child(4n) {
            animation-duration: 1400ms;
            fill: #F23B14;
        }
        rect:nth-child(3n) {
            animation-duration: 1750ms;
            animation-delay: 700ms;
        }
        rect:nth-child(4n-7) {
            fill: #2A2F6A;
        }
        rect:nth-child(6n) {
            fill: #FBBA23;
        }

        @keyframes blast {
            from {
                opacity: 0;
            }
            20% {
                opacity: 1;
            }
            to {
                transform: translateY(90px);
            }
        }
    </style>
</svg>

Oke, liar. Jadi jika Anda menyimpan ini sebagai SVG dan membukanya di browser Anda, sekarang Anda akan melihat beberapa confetti animasi, tetapi ada yang salah dengan penempatan potongan confetti kami. Saat ini adalah elemen DOM, mereka baru saja berfungsi. Sesuatu pasti berbeda tentang SVG. Jika Anda menebak bahwa SVG memiliki asal transformasi yang berbeda, Anda benar. Di DOM, jika Anda memutar sesuatu dengan CSS, itu hanya berputar secara default di tengah elemen. Di SVG asal defaultnya adalah 0,0, artinya paling kiri atas kanvas kita 🤦‍♂️

Saya memecahkan ini dengan mengukur jarak di Figma dan meng-hardcoding beberapa asal transformasi, mis. g.

<svg>
    <style type="text/css">...</style>
    <rect />
</svg>

3 Asal-usul ini bukan pusat persegi panjang yang sempurna, tetapi cukup dekat

<svg width="600" height="90" viewBox="0 0 600 90" fill="none" xmlns="http://www.w3.org/2000/svg">
    <rect x="42" y="0" width="6" height="10"/>
    <rect x="84" y="0" width="6" height="10"/>
    <rect x="126" y="0" width="5" height="13"/>
    <rect x="168" y="0" width="5" height="13"/>
    <rect x="210" y="0" width="6" height="10"/>
    <rect x="252" y="0" width="5" height="13"/>
    <rect x="294" y="0" width="6" height="10"/>
    <rect x="336" y="0" width="5" height="13"/>
    <rect x="378" y="0" width="5" height="13"/>
    <rect x="420" y="0" width="6" height="10"/>
    <rect x="462" y="0" width="6" height="10"/>
    <rect x="504" y="0" width="5" height="13"/>
    <rect x="546" y="0" width="6" height="10"/>

    <style type="text/css">
        rect {
            opacity: 0;
        }
        rect:nth-child(1) {
            transform-origin: 45px 5px;
            transform: rotate(-145deg);
            animation: blast 700ms infinite ease-out;
            animation-delay: 88ms;
            animation-duration: 631ms;
        }
        rect:nth-child(2) {
            transform-origin: 87px 5px;
            transform: rotate(164deg);
            animation: blast 700ms infinite ease-out;
            animation-delay: 131ms;
            animation-duration: 442ms;
        }
        rect:nth-child(3) {
            transform-origin: 128px 6px;
            transform: rotate(4deg);
            animation: blast 700ms infinite ease-out;
            animation-delay: 92ms;
            animation-duration: 662ms;
        }
        rect:nth-child(4) {
            transform-origin: 170px 6px;
            transform: rotate(-175deg);
            animation: blast 700ms infinite ease-out;
            animation-delay: 17ms;
            animation-duration: 593ms;
        }
        rect:nth-child(5) {
            transform-origin: 213px 5px;
            transform: rotate(-97deg);
            animation: blast 700ms infinite ease-out;
            animation-delay: 122ms;
            animation-duration: 476ms;
        }
        rect:nth-child(6) {
            transform-origin: 255px 6px;
            transform: rotate(57deg);
            animation: blast 700ms infinite ease-out;
            animation-delay: 271ms;
            animation-duration: 381ms;
        }
        rect:nth-child(7) {
            transform-origin: 297px 5px;
            transform: rotate(-46deg);
            animation: blast 700ms infinite ease-out;
            animation-delay: 131ms;
            animation-duration: 619ms;
        }
        rect:nth-child(8) {
            transform-origin: 338px 6px;
            transform: rotate(-65deg);
            animation: blast 700ms infinite ease-out;
            animation-delay: 85ms;
            animation-duration: 668ms;
        }
        rect:nth-child(9) {
            transform-origin: 380px 6px;
            transform: rotate(13deg);
            animation: blast 700ms infinite ease-out;
            animation-delay: 128ms;
            animation-duration: 377ms;
        }
        rect:nth-child(10) {
            transform-origin: 423px 5px;
            transform: rotate(176deg);
            animation: blast 700ms infinite ease-out;
            animation-delay: 311ms;
            animation-duration: 508ms;
        }
        rect:nth-child(11) {
            transform-origin: 465px 5px;
            transform: rotate(108deg);
            animation: blast 700ms infinite ease-out;
            animation-delay: 108ms;
            animation-duration: 595ms;
        }
        rect:nth-child(12) {
            transform-origin: 506px 6px;
            transform: rotate(62deg);
            animation: blast 700ms infinite ease-out;
            animation-delay: 105ms;
            animation-duration: 375ms;
        }
        rect:nth-child(13) {
            transform-origin: 549px 5px;
            transform: rotate(16deg);
            animation: blast 700ms infinite ease-out;
            animation-delay: 149ms;
            animation-duration: 491ms;
        }
        rect:nth-child(odd) {
            fill: #65BB5C;
        }
        rect:nth-child(even) {
            z-index: 1;
            fill: #33AAFF;
        }
        rect:nth-child(4n) {
            animation-duration: 1400ms;
            fill: #F23B14;
        }
        rect:nth-child(3n) {
            animation-duration: 1750ms;
            animation-delay: 700ms;
        }
        rect:nth-child(4n-7) {
            fill: #2A2F6A;
        }
        rect:nth-child(6n) {
            fill: #FBBA23;
        }

        @keyframes blast {
            from {
                opacity: 0;
            }
            20% {
                opacity: 1;
            }
            to {
                transform: translateY(90px);
            }
        }
    </style>
</svg>

Hanya satu kemahiran terakhir. Karena asal-usulnya sedikit berbeda di SVG, saya perhatikan bahwa di bagian bawah, ada beberapa potongan confetti yang terpotong di akhir animasinya. Kita bisa menyelesaikan ini dengan menggerakkan karya kita ke atas dan ke luar kanvas

<rect x="42" y="-10" width="6" height="10"/>
<rect x="84" y="-10" width="6" height="10"/>
<rect x="126" y="-13" width="5" height="13"/>
<rect x="168" y="-13" width="5" height="13"/>
<rect x="210" y="-10" width="6" height="10"/>
<rect x="252" y="-13" width="5" height="13"/>
<rect x="294" y="-10" width="6" height="10"/>
<rect x="336" y="-13" width="5" height="13"/>
<rect x="378" y="-13" width="5" height="13"/>
<rect x="420" y="-10" width="6" height="10"/>
<rect x="462" y="-10" width="6" height="10"/>
<rect x="504" y="-13" width="5" height="13"/>
<rect x="546" y="-10" width="6" height="10"/>

_

Pengiriman

Besar. Kami memiliki satu file SVG yang sekarang menangani semua animasi, dan sekarang kami menempatkannya sebagai gambar latar belakang pada elemen apa pun yang kami inginkan. Kami juga menyukai pengaturan waktu, warna, dan ukuran animasi kami

Kami dapat berhenti di sini dan memastikan bahwa setiap proyek memiliki file

<svg>
    <style type="text/css">...</style>
    <rect />
</svg>

4 ini di suatu tempat di sistem file…

ATAU kami dapat merangkum lebih jauh dengan menyandikan seluruh SVG ini (dengan CSS) dalam file CSS sistem desain kami. CSS di SVG di CSS?

Ini sesederhana menyandikan SVG sebagai gambar latar belakang

.bg-confetti-animated {
    background-repeat: repeat-x;
    background-position: top -10px center;
    background-image: url("data:image/svg+xml,%3Csvg width='600' height='90' viewBox='0 0 600 90' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='42' y='-10' width='6' height='10'/%3E%3Crect x='84' y='-10' width='6' height='10'/%3E%3Crect x='126' y='-13' width='5' height='13'/%3E%3Crect x='168' y='-13' width='5' height='13'/%3E%3Crect x='210' y='-10' width='6' height='10'/%3E%3Crect x='252' y='-13' width='5' height='13'/%3E%3Crect x='294' y='-10' width='6' height='10'/%3E%3Crect x='336' y='-13' width='5' height='13'/%3E%3Crect x='378' y='-13' width='5' height='13'/%3E%3Crect x='420' y='-10' width='6' height='10'/%3E%3Crect x='462' y='-10' width='6' height='10'/%3E%3Crect x='504' y='-13' width='5' height='13'/%3E%3Crect x='546' y='-10' width='6' height='10'/%3E%3Cstyle type='text/css'%3E rect %7B opacity: 0; %7D rect:nth-child(1) %7B transform-origin: 45px 5px; transform: rotate(-145deg); animation: blast 700ms infinite ease-out; animation-delay: 88ms; animation-duration: 631ms; %7D rect:nth-child(2) %7B transform-origin: 87px 5px; transform: rotate(164deg); animation: blast 700ms infinite ease-out; animation-delay: 131ms; animation-duration: 442ms; %7D rect:nth-child(3) %7B transform-origin: 128px 6px; transform: rotate(4deg); animation: blast 700ms infinite ease-out; animation-delay: 92ms; animation-duration: 662ms; %7D rect:nth-child(4) %7B transform-origin: 170px 6px; transform: rotate(-175deg); animation: blast 700ms infinite ease-out; animation-delay: 17ms; animation-duration: 593ms; %7D rect:nth-child(5) %7B transform-origin: 213px 5px; transform: rotate(-97deg); animation: blast 700ms infinite ease-out; animation-delay: 122ms; animation-duration: 476ms; %7D rect:nth-child(6) %7B transform-origin: 255px 6px; transform: rotate(57deg); animation: blast 700ms infinite ease-out; animation-delay: 271ms; animation-duration: 381ms; %7D rect:nth-child(7) %7B transform-origin: 297px 5px; transform: rotate(-46deg); animation: blast 700ms infinite ease-out; animation-delay: 131ms; animation-duration: 619ms; %7D rect:nth-child(8) %7B transform-origin: 338px 6px; transform: rotate(-65deg); animation: blast 700ms infinite ease-out; animation-delay: 85ms; animation-duration: 668ms; %7D rect:nth-child(9) %7B transform-origin: 380px 6px; transform: rotate(13deg); animation: blast 700ms infinite ease-out; animation-delay: 128ms; animation-duration: 377ms; %7D rect:nth-child(10) %7B transform-origin: 423px 5px; transform: rotate(176deg); animation: blast 700ms infinite ease-out; animation-delay: 311ms; animation-duration: 508ms; %7D rect:nth-child(11) %7B transform-origin: 465px 5px; transform: rotate(108deg); animation: blast 700ms infinite ease-out; animation-delay: 108ms; animation-duration: 595ms; %7D rect:nth-child(12) %7B transform-origin: 506px 6px; transform: rotate(62deg); animation: blast 700ms infinite ease-out; animation-delay: 105ms; animation-duration: 375ms; %7D rect:nth-child(13) %7B transform-origin: 549px 5px; transform: rotate(16deg); animation: blast 700ms infinite ease-out; animation-delay: 149ms; animation-duration: 491ms; %7D rect:nth-child(odd) %7B fill: %2365BB5C; %7D rect:nth-child(even) %7B z-index: 1; fill: %2333AAFF; %7D rect:nth-child(4n) %7B animation-duration: 1400ms; fill: %23F23B14; %7D rect:nth-child(3n) %7B animation-duration: 1750ms; animation-delay: 700ms; %7D rect:nth-child(4n-7) %7B fill: %232A2F6A; %7D rect:nth-child(6n) %7B fill: %23FBBA23; %7D @keyframes blast %7B from %7B opacity: 0; %7D 20%25 %7B opacity: 1; %7D to %7B transform: translateY(90px); %7D %7D %3C/style%3E%3C/svg%3E%0A");
}

Saya menggunakan alat yoksel setiap kali saya harus menyandikan sesuatu seperti ini

Mendukung gerakan yang berkurang

Beberapa orang mengalami kesulitan dengan animasi. Yang lain lebih suka tidak melihatnya sama sekali. Untungnya, browser kami menawarkan kueri media untuk

<svg>
    <style type="text/css">...</style>
    <rect />
</svg>

5 ini. Mari kita gunakan untuk menunjukkan sedikit confetti yang dirender secara statis, yang sebenarnya merupakan pendekatan ad-hoc organik asli yang kami ambil

Vivian cukup baik untuk membuat versi statis dari confetti di Figma

Sekarang tinggal menyematkan versi statis di balik kueri media tersebut

.bg-confetti-animated {
    background-repeat: repeat-x;
    background-position: top -10px center;
    background-image: url("data:image/svg+xml,%3Csvg width='600' height='90' viewBox='0 0 600 90' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='42' y='-10' width='6' height='10'/%3E%3Crect x='84' y='-10' width='6' height='10'/%3E%3Crect x='126' y='-13' width='5' height='13'/%3E%3Crect x='168' y='-13' width='5' height='13'/%3E%3Crect x='210' y='-10' width='6' height='10'/%3E%3Crect x='252' y='-13' width='5' height='13'/%3E%3Crect x='294' y='-10' width='6' height='10'/%3E%3Crect x='336' y='-13' width='5' height='13'/%3E%3Crect x='378' y='-13' width='5' height='13'/%3E%3Crect x='420' y='-10' width='6' height='10'/%3E%3Crect x='462' y='-10' width='6' height='10'/%3E%3Crect x='504' y='-13' width='5' height='13'/%3E%3Crect x='546' y='-10' width='6' height='10'/%3E%3Cstyle type='text/css'%3E rect %7B opacity: 0; %7D rect:nth-child(1) %7B transform-origin: 45px 5px; transform: rotate(-145deg); animation: blast 700ms infinite ease-out; animation-delay: 88ms; animation-duration: 631ms; %7D rect:nth-child(2) %7B transform-origin: 87px 5px; transform: rotate(164deg); animation: blast 700ms infinite ease-out; animation-delay: 131ms; animation-duration: 442ms; %7D rect:nth-child(3) %7B transform-origin: 128px 6px; transform: rotate(4deg); animation: blast 700ms infinite ease-out; animation-delay: 92ms; animation-duration: 662ms; %7D rect:nth-child(4) %7B transform-origin: 170px 6px; transform: rotate(-175deg); animation: blast 700ms infinite ease-out; animation-delay: 17ms; animation-duration: 593ms; %7D rect:nth-child(5) %7B transform-origin: 213px 5px; transform: rotate(-97deg); animation: blast 700ms infinite ease-out; animation-delay: 122ms; animation-duration: 476ms; %7D rect:nth-child(6) %7B transform-origin: 255px 6px; transform: rotate(57deg); animation: blast 700ms infinite ease-out; animation-delay: 271ms; animation-duration: 381ms; %7D rect:nth-child(7) %7B transform-origin: 297px 5px; transform: rotate(-46deg); animation: blast 700ms infinite ease-out; animation-delay: 131ms; animation-duration: 619ms; %7D rect:nth-child(8) %7B transform-origin: 338px 6px; transform: rotate(-65deg); animation: blast 700ms infinite ease-out; animation-delay: 85ms; animation-duration: 668ms; %7D rect:nth-child(9) %7B transform-origin: 380px 6px; transform: rotate(13deg); animation: blast 700ms infinite ease-out; animation-delay: 128ms; animation-duration: 377ms; %7D rect:nth-child(10) %7B transform-origin: 423px 5px; transform: rotate(176deg); animation: blast 700ms infinite ease-out; animation-delay: 311ms; animation-duration: 508ms; %7D rect:nth-child(11) %7B transform-origin: 465px 5px; transform: rotate(108deg); animation: blast 700ms infinite ease-out; animation-delay: 108ms; animation-duration: 595ms; %7D rect:nth-child(12) %7B transform-origin: 506px 6px; transform: rotate(62deg); animation: blast 700ms infinite ease-out; animation-delay: 105ms; animation-duration: 375ms; %7D rect:nth-child(13) %7B transform-origin: 549px 5px; transform: rotate(16deg); animation: blast 700ms infinite ease-out; animation-delay: 149ms; animation-duration: 491ms; %7D rect:nth-child(odd) %7B fill: %2365BB5C; %7D rect:nth-child(even) %7B z-index: 1; fill: %2333AAFF; %7D rect:nth-child(4n) %7B animation-duration: 1400ms; fill: %23F23B14; %7D rect:nth-child(3n) %7B animation-duration: 1750ms; animation-delay: 700ms; %7D rect:nth-child(4n-7) %7B fill: %232A2F6A; %7D rect:nth-child(6n) %7B fill: %23FBBA23; %7D @keyframes blast %7B from %7B opacity: 0; %7D 20%25 %7B opacity: 1; %7D to %7B transform: translateY(90px); %7D %7D %3C/style%3E%3C/svg%3E%0A");

    @media (prefers-reduced-motion) {
        background-image: url("data:image/svg+xml,%3Csvg width='574' height='60' viewBox='0 0 574 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect opacity='0.8' x='27.1224' y='20.0458' width='5' height='13' transform='rotate(-139 27.1224 20.0458)' fill='%23F23B14'/%3E%3Crect opacity='0.8' x='118.478' y='7.00201' width='5' height='13' transform='rotate(-38.8114 118.478 7.00201)' fill='%23FBBA23'/%3E%3Crect opacity='0.8' x='504.616' y='25.4479' width='5' height='13' transform='rotate(-60.2734 504.616 25.4479)' fill='%23F23B14'/%3E%3Crect opacity='0.6' x='538.983' y='45.555' width='5' height='13' transform='rotate(16.7826 538.983 45.555)' fill='%232A2F6A'/%3E%3Crect opacity='0.3' x='470.322' y='2.63625' width='5' height='13' transform='rotate(11.295 470.322 2.63625)' fill='%2333AAFF'/%3E%3Crect opacity='0.3' x='190.295' y='4.58138' width='5' height='13' transform='rotate(27.5954 190.295 4.58138)' fill='%23F23B14'/%3E%3Crect opacity='0.8' x='234.303' y='16.3233' width='5' height='13' transform='rotate(-41.8233 234.303 16.3233)' fill='%2365BB5C'/%3E%3Crect opacity='0.6' x='369.702' y='40.9875' width='5' height='13' transform='rotate(-56.419 369.702 40.9875)' fill='%2333AAFF'/%3E%3Crect opacity='0.3' x='402.121' y='31.0848' width='5' height='13' transform='rotate(-17.9234 402.121 31.0848)' fill='%23F23B14'/%3E%3Crect opacity='0.6' x='200.316' y='31.9328' width='5' height='13' transform='rotate(-15.8896 200.316 31.9328)' fill='%232A2F6A'/%3E%3Crect opacity='0.6' x='69.6745' y='23.4725' width='6' height='10' transform='rotate(70.0266 69.6745 23.4725)' fill='%2365BB5C'/%3E%3Crect opacity='0.6' x='291.945' y='7.16931' width='6' height='10' transform='rotate(30.4258 291.945 7.16931)' fill='%23FBBA23'/%3E%3Crect opacity='0.3' x='33.7754' y='38.2208' width='6' height='10' transform='rotate(38.6056 33.7754 38.2208)' fill='%23FBBA23'/%3E%3Crect opacity='0.8' x='109.752' y='31.1743' width='6' height='10' transform='rotate(28.5296 109.752 31.1743)' fill='%2333AAFF'/%3E%3Crect opacity='0.3' x='278.081' y='37.8695' width='6' height='10' transform='rotate(-26.5651 278.081 37.8695)' fill='%23F23B14'/%3E%3Crect opacity='0.8' x='416.294' y='11.5573' width='6' height='10' transform='rotate(-22.8498 416.294 11.5573)' fill='%23FBBA23'/%3E%3Crect opacity='0.3' x='354.667' y='9.32341' width='6' height='10' transform='rotate(17.7506 354.667 9.32341)' fill='%232A2F6A'/%3E%3Crect opacity='0.8' x='532.404' y='16.6372' width='6' height='10' transform='rotate(-75.3432 532.404 16.6372)' fill='%23FBBA23'/%3E%3Crect opacity='0.6' x='460.463' y='39.3557' width='6' height='10' transform='rotate(45.4982 460.463 39.3557)' fill='%2365BB5C'/%3E%3C/svg%3E");
    }
}

Kami juga dapat menyediakan ini sebagai kelas terpisah dengan

<svg>
    <style type="text/css">...</style>
    <rect />
</svg>

6

.bg-confetti-static {
    background-repeat: repeat-x;
    background-position: top -10px center;
    background-image: url("data:image/svg+xml,%3Csvg width='574' height='60' viewBox='0 0 574 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect opacity='0.8' x='27.1224' y='20.0458' width='5' height='13' transform='rotate(-139 27.1224 20.0458)' fill='%23F23B14'/%3E%3Crect opacity='0.8' x='118.478' y='7.00201' width='5' height='13' transform='rotate(-38.8114 118.478 7.00201)' fill='%23FBBA23'/%3E%3Crect opacity='0.8' x='504.616' y='25.4479' width='5' height='13' transform='rotate(-60.2734 504.616 25.4479)' fill='%23F23B14'/%3E%3Crect opacity='0.6' x='538.983' y='45.555' width='5' height='13' transform='rotate(16.7826 538.983 45.555)' fill='%232A2F6A'/%3E%3Crect opacity='0.3' x='470.322' y='2.63625' width='5' height='13' transform='rotate(11.295 470.322 2.63625)' fill='%2333AAFF'/%3E%3Crect opacity='0.3' x='190.295' y='4.58138' width='5' height='13' transform='rotate(27.5954 190.295 4.58138)' fill='%23F23B14'/%3E%3Crect opacity='0.8' x='234.303' y='16.3233' width='5' height='13' transform='rotate(-41.8233 234.303 16.3233)' fill='%2365BB5C'/%3E%3Crect opacity='0.6' x='369.702' y='40.9875' width='5' height='13' transform='rotate(-56.419 369.702 40.9875)' fill='%2333AAFF'/%3E%3Crect opacity='0.3' x='402.121' y='31.0848' width='5' height='13' transform='rotate(-17.9234 402.121 31.0848)' fill='%23F23B14'/%3E%3Crect opacity='0.6' x='200.316' y='31.9328' width='5' height='13' transform='rotate(-15.8896 200.316 31.9328)' fill='%232A2F6A'/%3E%3Crect opacity='0.6' x='69.6745' y='23.4725' width='6' height='10' transform='rotate(70.0266 69.6745 23.4725)' fill='%2365BB5C'/%3E%3Crect opacity='0.6' x='291.945' y='7.16931' width='6' height='10' transform='rotate(30.4258 291.945 7.16931)' fill='%23FBBA23'/%3E%3Crect opacity='0.3' x='33.7754' y='38.2208' width='6' height='10' transform='rotate(38.6056 33.7754 38.2208)' fill='%23FBBA23'/%3E%3Crect opacity='0.8' x='109.752' y='31.1743' width='6' height='10' transform='rotate(28.5296 109.752 31.1743)' fill='%2333AAFF'/%3E%3Crect opacity='0.3' x='278.081' y='37.8695' width='6' height='10' transform='rotate(-26.5651 278.081 37.8695)' fill='%23F23B14'/%3E%3Crect opacity='0.8' x='416.294' y='11.5573' width='6' height='10' transform='rotate(-22.8498 416.294 11.5573)' fill='%23FBBA23'/%3E%3Crect opacity='0.3' x='354.667' y='9.32341' width='6' height='10' transform='rotate(17.7506 354.667 9.32341)' fill='%232A2F6A'/%3E%3Crect opacity='0.8' x='532.404' y='16.6372' width='6' height='10' transform='rotate(-75.3432 532.404 16.6372)' fill='%23FBBA23'/%3E%3Crect opacity='0.6' x='460.463' y='39.3557' width='6' height='10' transform='rotate(45.4982 460.463 39.3557)' fill='%2365BB5C'/%3E%3C/svg%3E");
}

Itu membungkusnya. Sekarang teknisi dan desainer kami memiliki satu kelas portabel

<svg>
    <style type="text/css">...</style>
    <rect />
</svg>

7 yang dapat mereka tambahkan ke elemen level blok apa pun. Anda dapat melihat dokumentasi lebih lanjut tentang sistem desain kami, , dan bagaimana kami mengembangkannya

Itu dia. CSS di SVG di confetti CSS. 🎉 Tidak ada dependensi tambahan, dan semuanya dibundel dalam CSS kami

Bagaimana cara menyingkirkan sumber pemblokiran render di CSS?

9 trik untuk menghilangkan sumber daya pemblokiran render .

Identifikasi sumber daya pemblokiran render Anda

Jangan tambahkan CSS dengan aturan @import

Gunakan atribut media untuk CSS bersyarat

Tunda CSS yang tidak kritis

Gunakan atribut defer dan async untuk menghilangkan JavaScript yang memblokir render

Temukan dan hapus CSS dan JavaScript yang tidak digunakan

Bagaimana cara saya menyingkirkan plugin pemblokiran Render?

Untuk mengurangi jumlah skrip yang memblokir perenderan di situs Anda, Anda harus mengikuti beberapa praktik terbaik. .

'Perkecil' JavaScript dan CSS Anda. Ini berarti menghapus semua spasi ekstra dan komentar yang tidak perlu dalam kode

Gabungkan JavaScript dan CSS Anda. .

Tunda pemuatan JavaScript

Mengapa pemblokiran render CSS?

Secara default, CSS diperlakukan sebagai sumber pemblokiran render, yang berarti bahwa browser tidak akan merender konten yang diproses hingga CSSOM dibuat. Make sure to keep your CSS lean, deliver it as quickly as possible, and use media types and queries to unblock rendering.

Bagaimana cara menghilangkan sumber pemblokiran render di WordPress tanpa plugin?

Cara menghilangkan sumber daya pemblokiran render di WordPress .

Optimalkan pemuatan CSS. Salah satu cara untuk menghilangkan sumber daya yang memblokir perenderan adalah dengan mengoptimalkan pemuatan CSS situs web Anda. .

Tunda JavaScript yang tidak penting. .

Tunda gambar di luar layar. .

Hapus JavaScript yang memblokir render secara manual. .

Terapkan atribut async atau defer dengan plugin

kode css