Frontend Masters Boost RSS Feed

console.delight

Zach Saucier — Thu, 11 Jan 2024 15:24:09 +0000

console.info("Use animated SVGs!"); console.info( "%c ", `padding-left:800px;line-height:250px;padding-block:125px;background-repeat:no-repeat;background-image:url("data:image/svg+xml,%3Csvg class='svg-snowscene' viewBox='0 0 800 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E@keyframes snowing%7B0%25%7Bfill-opacity:1%7D100%25%7Bfill-opacity:0;transform:translateY(250px)%7D%7D.svg-snowscene%7Bbackground-color:%239cf;background-image:linear-gradient(%236af,%23bdf)%7Dtext%7Bfill:%23fff;font-family:cursive%7Dcircle%7Bfill:%23fff;animation-name:snowing;animation-iteration-count:infinite;animation-timing-function:ease-out%7Dcircle:nth-child(1n)%7Banimation-delay:-.2s;animation-duration:7s%7Dcircle:nth-child(2n)%7Banimation-delay:-.4s;animation-duration:6s%7Dcircle:nth-child(3n)%7Banimation-delay:-.6s;animation-duration:8s%7Dcircle:nth-child(4n)%7Banimation-delay:-.8s;animation-duration:9s%7Dcircle:nth-child(5n)%7Banimation-delay:-1s;animation-duration:8s%7Dcircle:nth-child(6n)%7Banimation-delay:-1.2s;animation-duration:10s%7Dcircle:nth-child(7n)%7Banimation-delay:-1.4s;animation-duration:10s%7Dcircle:nth-child(8n)%7Banimation-delay:-1.6s;animation-duration:10s%7Dcircle:nth-child(9n)%7Banimation-delay:-1.8s;animation-duration:8s%7Dcircle:nth-child(10n)%7Banimation-delay:-2s;animation-duration:9s%7Dcircle:nth-child(11n)%7Banimation-delay:-2.2s;animation-duration:7s%7Dcircle:nth-child(12n)%7Banimation-delay:-2.4s;animation-duration:8s%7Dcircle:nth-child(13n)%7Banimation-delay:-2.6s;animation-duration:9s%7Dcircle:nth-child(14n)%7Banimation-delay:-2.8s;animation-duration:10s%7Dcircle:nth-child(15n)%7Banimation-delay:-3s;animation-duration:10s%7Dcircle:nth-child(16n)%7Banimation-delay:-3.2s;animation-duration:6s%7Dcircle:nth-child(17n)%7Banimation-delay:-3.4s;animation-duration:7s%7Dcircle:nth-child(18n)%7Banimation-delay:-3.6s;animation-duration:6s%7Dcircle:nth-child(19n)%7Banimation-delay:-3.8s;animation-duration:8s%7Dcircle:nth-child(20n)%7Banimation-delay:-4s;animation-duration:6s%7Dcircle:nth-child(21n)%7Banimation-delay:-4.2s;animation-duration:9s%7Dcircle:nth-child(22n)%7Banimation-delay:-4.4s;animation-duration:9s%7Dcircle:nth-child(23n)%7Banimation-delay:-4.6s;animation-duration:8s%7Dcircle:nth-child(24n)%7Banimation-delay:-4.8s;animation-duration:7s%7Dcircle:nth-child(25n)%7Banimation-delay:-5s;animation-duration:8s%7Dcircle:nth-child(26n)%7Banimation-delay:-5.2s;animation-duration:7s%7Dcircle:nth-child(27n)%7Banimation-delay:-5.4s;animation-duration:6s%7Dcircle:nth-child(28n)%7Banimation-delay:-5.6s;animation-duration:8s%7Dcircle:nth-child(29n)%7Banimation-delay:-5.8s;animation-duration:10s%7Dcircle:nth-child(30n)%7Banimation-delay:-6s;animation-duration:10s%7Dcircle:nth-child(31n)%7Banimation-delay:-6.2s;animation-duration:9s%7Dcircle:nth-child(32n)%7Banimation-delay:-6.4s;animation-duration:10s%7Dcircle:nth-child(33n)%7Banimation-delay:-6.6s;animation-duration:10s%7Dcircle:nth-child(34n)%7Banimation-delay:-6.8s;animation-duration:6s%7Dcircle:nth-child(35n)%7Banimation-delay:-7s;animation-duration:6s%7Dcircle:nth-child(36n)%7Banimation-delay:-7.2s;animation-duration:10s%7Dcircle:nth-child(37n)%7Banimation-delay:-7.4s;animation-duration:7s%7Dcircle:nth-child(38n)%7Banimation-delay:-7.6s;animation-duration:9s%7Dcircle:nth-child(39n)%7Banimation-delay:-7.8s;animation-duration:9s%7Dcircle:nth-child(40n)%7Banimation-delay:-8s;animation-duration:8s%7Dcircle:nth-child(41n)%7Banimation-delay:-8.2s;animation-duration:6s%7Dcircle:nth-child(42n)%7Banimation-delay:-8.4s;animation-duration:10s%7Dcircle:nth-child(43n)%7Banimation-delay:-8.6s;animation-duration:7s%7Dcircle:nth-child(44n)%7Banimation-delay:-8.8s;animation-duration:9s%7Dcircle:nth-child(45n)%7Banimation-delay:-9s;animation-duration:10s%7Dcircle:nth-child(46n)%7Banimation-delay:-9.2s;animation-duration:6s%7Dcircle:nth-child(47n)%7Banimation-delay:-9.4s;animation-duration:7s%7Dcircle:nth-child(48n)%7Banimation-delay:-9.6s;animation-duration:9s%7Dcircle:nth-child(49n)%7Banimation-delay:-9.8s;animation-duration:7s%7Dcircle:nth-child(50n)%7Banimation-delay:-10s;animation-duration:7s%7D%3C/style%3E%3Ctext font-size='80' text-anchor='middle' x='400' y='140'%3EMerry Christmas!%3C/text%3E%3Ccircle cx='25.995103990111105%25' cy='-77.81008995571561' r='2.749159658185124'%3E%3C/circle%3E%3Ccircle cx='89.62561554717637%25' cy='-46.78148229694086' r='2.393631489179748'%3E%3C/circle%3E%3Ccircle cx='5.135745159612563%25' cy='-38.81872689180804' r='2.841244102307123'%3E%3C/circle%3E%3Ccircle cx='40.819201884845775%25' cy='-34.58293639476059' r='1.4458270158519961'%3E%3C/circle%3E%3Ccircle cx='26.212971825618283%25' cy='-12.498573576229386' r='2.9709903306827465'%3E%3C/circle%3E%3Ccircle cx='76.68859580291824%25' cy='-62.21926850640058' r='1.1347363710323926'%3E%3C/circle%3E%3Ccircle cx='55.72266234658971%25' cy='-74.73326327616485' r='1.113806305196924'%3E%3C/circle%3E%3Ccircle cx='39.0317830273073%25' cy='-58.703705511039225' r='2.3100083626369976'%3E%3C/circle%3E%3Ccircle cx='89.7176436793289%25' cy='-10.281820667480222' r='2.0469063477660447'%3E%3C/circle%3E%3Ccircle cx='83.96827591096722%25' cy='-81.2478772998329' r='1.790201302779563'%3E%3C/circle%3E%3Ccircle cx='7.260053772750218%25' cy='-96.49215734429552' r='2.3545864333810256'%3E%3C/circle%3E%3Ccircle cx='26.883202292253728%25' cy='-37.108549732420656' r='1.9978674352572674'%3E%3C/circle%3E%3Ccircle cx='58.50316757093038%25' cy='-44.19563368875621' r='2.1333080325968745'%3E%3C/circle%3E%3Ccircle cx='49.153134743170924%25' cy='-96.61192814231214' r='1.0338012128288736'%3E%3C/circle%3E%3Ccircle cx='80.66335728120768%25' cy='-92.60017007342769' r='1.352444421725643'%3E%3C/circle%3E%3Ccircle cx='49.21716180537502%25' cy='-15.736517819787414' r='2.56514014572579'%3E%3C/circle%3E%3Ccircle cx='18.159072047777208%25' cy='-41.662630986758565' r='1.827289622857739'%3E%3C/circle%3E%3Ccircle cx='28.591656766804356%25' cy='-75.40392903873996' r='2.540805639719657'%3E%3C/circle%3E%3Ccircle cx='75.7560667785456%25' cy='-42.093604757726446' r='1.411351114203426'%3E%3C/circle%3E%3Ccircle cx='95.86623136857125%25' cy='-86.17237490881534' r='1.6437772466697007'%3E%3C/circle%3E%3Ccircle cx='66.57358996698223%25' cy='-33.05038635630268' r='1.224578596470813'%3E%3C/circle%3E%3Ccircle cx='37.87486333612133%25' cy='-91.98642442806697' r='1.5164858217037178'%3E%3C/circle%3E%3Ccircle cx='99.9780409949983%25' cy='-85.25670632025145' r='1.093408865757894'%3E%3C/circle%3E%3Ccircle cx='6.258195692333731%25' cy='-82.17612056080935' r='2.5970745236726915'%3E%3C/circle%3E%3Ccircle cx='76.92756548357505%25' cy='-39.05022432020484' r='1.3903120977596086'%3E%3C/circle%3E%3Ccircle cx='35.30776480586916%25' cy='-5.100866152259875' r='2.490933162143621'%3E%3C/circle%3E%3Ccircle cx='21.888577746640067%25' cy='-53.61306945430116' r='1.5911619566776065'%3E%3C/circle%3E%3Ccircle cx='5.408329205067845%25' cy='-25.216367465595514' r='1.7561674911504097'%3E%3C/circle%3E%3Ccircle cx='11.607577654364524%25' cy='-50.29316328357586' r='1.9271574194581076'%3E%3C/circle%3E%3Ccircle cx='80.61508259836967%25' cy='-56.47870637418366' r='2.7379039794681383'%3E%3C/circle%3E%3Ccircle cx='75.29235125946235%25' cy='-24.205675758687455' r='1.7921437262309654'%3E%3C/circle%3E%3Ccircle cx='97.78226376693122%25' cy='-32.21154549976014' r='1.529148319088483'%3E%3C/circle%3E%3Ccircle cx='73.75693711579706%25' cy='-23.004150289082606' r='2.4556699382045046'%3E%3C/circle%3E%3Ccircle cx='41.419838495897%25' cy='-65.31921232448768' r='2.8044281379588676'%3E%3C/circle%3E%3Ccircle cx='40.950298123173106%25' cy='-26.292156289520896' r='2.419680017572999'%3E%3C/circle%3E%3Ccircle cx='47.867691980584716%25' cy='-26.242657523185184' r='1.0923877243334101'%3E%3C/circle%3E%3Ccircle cx='62.81766527782989%25' cy='-89.701930860537' r='1.7949190430635444'%3E%3C/circle%3E%3Ccircle cx='48.69722811509327%25' cy='-10.958255978759077' r='2.861844670749401'%3E%3C/circle%3E%3Ccircle cx='34.57978264890831%25' cy='-1.1612908265357433' r='1.6199043038315515'%3E%3C/circle%3E%3Ccircle cx='37.96738880106298%25' cy='-12.825961059362545' r='2.8559531388340513'%3E%3C/circle%3E%3Ccircle cx='85.46233678220392%25' cy='-88.02351857384527' r='1.0984128042737793'%3E%3C/circle%3E%3Ccircle cx='64.4596084875124%25' cy='-19.803934792180392' r='2.6968494185321026'%3E%3C/circle%3E%3Ccircle cx='56.87846924216383%25' cy='-68.9330339781381' r='2.441322855837859'%3E%3C/circle%3E%3Ccircle cx='87.67115279021654%25' cy='-57.12781963683186' r='1.268498259959995'%3E%3C/circle%3E%3Ccircle cx='87.86909883390128%25' cy='-65.7354110827157' r='1.2941568814088011'%3E%3C/circle%3E%3Ccircle cx='30.16692089861322%25' cy='-34.69868021057453' r='1.082850239075611'%3E%3C/circle%3E%3Ccircle cx='63.21354400809286%25' cy='-48.79787125206968' r='2.6866316912738153'%3E%3C/circle%3E%3Ccircle cx='73.1130164281696%25' cy='-14.128826564618988' r='2.396208563109712'%3E%3C/circle%3E%3Ccircle cx='49.592435166991244%25' cy='-28.576612560341417' r='2.265863084175359'%3E%3C/circle%3E%3Ccircle cx='12.364052530549507%25' cy='-22.31568226585923' r='2.8058073048920886'%3E%3C/circle%3E%3Cscript%3Efunction r(min, max) %7B return Math.random() * (max - min) + min; %7D const s = document.querySelectorAll('circle'); function l() %7B for (let i = 0; i < s.length; i++) %7B let f = s%5Bi%5D; f.setAttribute('cx', r(1, 100) + '%25'); f.setAttribute('cy', '-' + r(1, 100)); f.setAttribute('r', r(1, 3)); %7D %7D l();%3C/script%3E%3C/svg%3E")` ); console.info("Use any image!"); console.info( '%c ', "padding-left:300px;line-height:200px;padding-block:100px;background-image: url('data:image/jpeg;base64,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'); background-size: 300px; background-repeat: no-repeat;" ); console.info("Use HTML and 3D rendering!"); console.info( '%c ', `line-height:200px;padding-block:100px;padding-left:200px;background-repeat:no-repeat;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cstyle%3E .wrapper %7B font-family: sans-serif; perspective: 500px; text-align: center; position: relative; width: 100%25; height: 100%25; %7D .cube %7B position: absolute; top: 20%25; left: 30%25; transform-style: preserve-3d; transform: rotateY(40deg) rotateX(-40deg); animation: wiggle_wiggle_wiggle_wiggle_wiggle_yeah 3s ease-in-out infinite alternate; %7D .side %7B width: 8rem; height: 8rem; background: rgba(0, 0, 0, 0.8); display: inline-block; position: absolute; line-height: 8rem; color: %23fff; text-align: center; box-sizing: border-box; border: 3px solid %23f00; font-size: 4rem; %7D .front %7B transform: translateZ(4rem); z-index: 1; %7D .back %7B transform: rotateY(180deg) translateZ(4rem); %7D .left %7B transform: rotateY(-90deg) translateZ(4rem); z-index: 1; %7D .right %7B transform: rotateY(90deg) translateZ(4rem); %7D .top %7B transform: rotateX(90deg) translateZ(4rem); %7D .bottom %7B transform: rotateX(-90deg) translateZ(4rem); %7D @keyframes wiggle_wiggle_wiggle_wiggle_wiggle_yeah %7B 0%25 %7B transform: rotateY(15deg) rotateX(-15deg); %7D 100%25 %7B transform: rotateY(60deg) rotateX(-45deg); %7D %7D %3C/style%3E%3CforeignObject width='100%25' height='100%25'%3E%3Cdiv xmlns='http://www.w3.org/1999/xhtml' class='wrapper'%3E%3Cdiv class='cube'%3E%3Cdiv class='side front'%3E1%3C/div%3E%3Cdiv class='side back'%3E6%3C/div%3E%3Cdiv class='side left'%3E3%3C/div%3E%3Cdiv class='side right'%3E4%3C/div%3E%3Cdiv class='side top'%3E2%3C/div%3E%3Cdiv class='side bottom'%3E5%3C/div%3E%3C/div%3E%3C/div%3E%3C/foreignObject%3E%3C/svg%3E")` ); console.info( '%cAnd more', `color:white;font-size:40px;line-height:300px;text-shadow:-1px -1px red, 1px 1px #ff1700, 3px 2px #ff2e00, 5px 3px orangered, 7px 4px #ff5c00, 9px 5px #ff7300, 11px 6px #ff8a00, 13px 7px #ffa100, 14px 8px #ffb800, 16px 9px #ffcf00, 18px 10px #ffe600, 20px 11px #fffc00, 22px 12px #ebff00, 23px 13px #d4ff00, 25px 14px #bdff00, 27px 15px #a6ff00, 28px 16px #8fff00, 30px 17px #78ff00, 32px 18px #61ff00, 33px 19px #4aff00, 35px 20px #33ff00, 36px 21px #1cff00, 38px 22px #05ff00, 39px 23px #00ff12, 41px 24px #00ff29, 42px 25px #00ff40, 43px 26px #00ff57, 45px 27px #00ff6e, 46px 28px #00ff85, 47px 29px #00ff9c, 48px 30px #00ffb3, 49px 31px #00ffc9, 50px 32px #00ffe0, 51px 33px #00fff7, 52px 34px #00f0ff, 53px 35px #00d9ff, 54px 36px #00c2ff, 55px 37px #00abff, 55px 38px #0094ff, 56px 39px #007dff, 57px 40px #0066ff, 57px 41px #004fff, 58px 42px #0038ff, 58px 43px #0021ff, 58px 44px #000aff, 59px 45px #0d00ff, 59px 46px #2400ff, 59px 47px #3b00ff, 59px 48px #5200ff, 59px 49px #6900ff, 60px 50px #8000ff, 59px 51px #9600ff, 59px 52px #ad00ff, 59px 53px #c400ff, 59px 54px #db00ff, 59px 55px #f200ff, 58px 56px #ff00f5, 58px 57px #ff00de, 58px 58px #ff00c7, 57px 59px #ff00b0, 57px 60px #ff0099, 56px 61px #ff0082, 55px 62px #ff006b, 55px 63px #ff0054, 54px 64px #ff003d, 53px 65px #ff0026, 52px 66px #ff000f, 51px 67px #ff0800, 50px 68px #ff1f00, 49px 69px #ff3600, 48px 70px #ff4d00, 47px 71px #ff6300, 46px 72px #ff7a00, 45px 73px #ff9100, 43px 74px #ffa800, 42px 75px #ffbf00, 41px 76px #ffd600, 39px 77px #ffed00, 38px 78px #faff00, 36px 79px #e3ff00, 35px 80px #ccff00, 33px 81px #b5ff00, 32px 82px #9eff00, 30px 83px #87ff00, 28px 84px #70ff00, 27px 85px #59ff00, 25px 86px #42ff00, 23px 87px #2bff00, 22px 88px #14ff00, 20px 89px #00ff03, 18px 90px #00ff1a, 16px 91px #00ff30, 14px 92px #00ff47, 13px 93px #00ff5e, 11px 94px #00ff75, 9px 95px #00ff8c, 7px 96px #00ffa3, 5px 97px #00ffba, 3px 98px #00ffd1, 1px 99px #00ffe8, 7px 100px cyan, -1px 101px #00e8ff, -3px 102px #00d1ff, -5px 103px #00baff, -7px 104px #00a3ff, -9px 105px #008cff, -11px 106px #0075ff, -13px 107px #005eff, -14px 108px #0047ff, -16px 109px #0030ff, -18px 110px #001aff, -20px 111px #0003ff, -22px 112px #1400ff, -23px 113px #2b00ff, -25px 114px #4200ff, -27px 115px #5900ff, -28px 116px #7000ff, -30px 117px #8700ff, -32px 118px #9e00ff, -33px 119px #b500ff, -35px 120px #cc00ff, -36px 121px #e300ff, -38px 122px #fa00ff, -39px 123px #ff00ed, -41px 124px #ff00d6, -42px 125px #ff00bf, -43px 126px #ff00a8, -45px 127px #ff0091, -46px 128px #ff007a, -47px 129px #ff0063, -48px 130px #ff004d, -49px 131px #ff0036, -50px 132px #ff001f, -51px 133px #ff0008, -52px 134px #ff0f00, -53px 135px #ff2600, -54px 136px #ff3d00, -55px 137px #ff5400, -55px 138px #ff6b00, -56px 139px #ff8200, -57px 140px #ff9900, -57px 141px #ffb000, -58px 142px #ffc700, -58px 143px #ffde00, -58px 144px #fff500, -59px 145px #f2ff00, -59px 146px #dbff00, -59px 147px #c4ff00, -59px 148px #adff00, -59px 149px #96ff00, -60px 150px #80ff00, -59px 151px #69ff00, -59px 152px #52ff00, -59px 153px #3bff00, -59px 154px #24ff00, -59px 155px #0dff00, -58px 156px #00ff0a, -58px 157px #00ff21, -58px 158px #00ff38, -57px 159px #00ff4f, -57px 160px #00ff66, -56px 161px #00ff7d, -55px 162px #00ff94, -55px 163px #00ffab, -54px 164px #00ffc2, -53px 165px #00ffd9, -52px 166px #00fff0, -51px 167px #00f7ff, -50px 168px #00e0ff, -49px 169px #00c9ff, -48px 170px #00b3ff, -47px 171px #009cff, -46px 172px #0085ff, -45px 173px #006eff, -43px 174px #0057ff, -42px 175px #0040ff, -41px 176px #0029ff, -39px 177px #0012ff, -38px 178px #0500ff, -36px 179px #1c00ff, -35px 180px #3300ff, -33px 181px #4a00ff, -32px 182px #6100ff, -30px 183px #7800ff, -28px 184px #8f00ff, -27px 185px #a600ff, -25px 186px #bd00ff, -23px 187px #d400ff, -22px 188px #eb00ff, -20px 189px #ff00fc, -18px 190px #ff00e6, -16px 191px #ff00cf, -14px 192px #ff00b8, -13px 193px #ff00a1, -11px 194px #ff008a, -9px 195px #ff0073, -7px 196px #ff005c, -5px 197px #ff0045, -3px 198px #ff002e, -1px 199px #ff0017, -1px 200px red, 1px 201px #ff1700, 3px 202px #ff2e00, 5px 203px orangered, 7px 204px #ff5c00, 9px 205px #ff7300, 11px 206px #ff8a00, 13px 207px #ffa100, 14px 208px #ffb800, 16px 209px #ffcf00, 18px 210px #ffe600, 20px 211px #fffc00, 22px 212px #ebff00, 23px 213px #d4ff00, 25px 214px #bdff00, 27px 215px #a6ff00, 28px 216px #8fff00, 30px 217px #78ff00, 32px 218px #61ff00, 33px 219px #4aff00, 35px 220px #33ff00, 36px 221px #1cff00, 38px 222px #05ff00, 39px 223px #00ff12, 41px 224px #00ff29, 42px 225px #00ff40, 43px 226px #00ff57, 45px 227px #00ff6e, 46px 228px #00ff85, 47px 229px #00ff9c, 48px 230px #00ffb3, 49px 231px #00ffc9, 50px 232px #00ffe0, 51px 233px #00fff7, 52px 234px #00f0ff, 53px 235px #00d9ff, 54px 236px #00c2ff, 55px 237px #00abff, 55px 238px #0094ff, 56px 239px #007dff, 57px 240px #0066ff, 57px 241px #004fff, 58px 242px #0038ff, 58px 243px #0021ff, 58px 244px #000aff, 59px 245px #0d00ff, 59px 246px #2400ff, 59px 247px #3b00ff, 59px 248px #5200ff, 59px 249px #6900ff, 60px 250px #8000ff, 59px 251px #9600ff, 59px 252px #ad00ff, 59px 253px #c400ff, 59px 254px #db00ff, 59px 255px #f200ff, 58px 256px #ff00f5, 58px 257px #ff00de, 58px 258px #ff00c7, 57px 259px #ff00b0, 57px 260px #ff0099, 56px 261px #ff0082, 55px 262px #ff006b, 55px 263px #ff0054, 54px 264px #ff003d, 53px 265px #ff0026, 52px 266px #ff000f, 51px 267px #ff0800, 50px 268px #ff1f00, 49px 269px #ff3600, 48px 270px #ff4d00, 47px 271px #ff6300, 46px 272px #ff7a00, 45px 273px #ff9100, 43px 274px #ffa800, 42px 275px #ffbf00, 41px 276px #ffd600, 39px 277px #ffed00, 38px 278px #faff00, 36px 279px #e3ff00, 35px 280px #ccff00, 33px 281px #b5ff00, 32px 282px #9eff00, 30px 283px #87ff00, 28px 284px #70ff00, 27px 285px #59ff00, 25px 286px #42ff00, 23px 287px #2bff00, 22px 288px #14ff00, 20px 289px #00ff03, 18px 290px #00ff1a, 16px 291px #00ff30, 14px 292px #00ff47, 13px 293px #00ff5e, 11px 294px #00ff75, 9px 295px #00ff8c, 7px 296px #00ffa3, 5px 297px #00ffba, 3px 298px #00ffd1, 1px 299px #00ffe8, 2px 300px cyan, -1px 301px #00e8ff, -3px 302px #00d1ff, -5px 303px #00baff, -7px 304px #00a3ff, -9px 305px #008cff, -11px 306px #0075ff, -13px 307px #005eff, -14px 308px #0047ff, -16px 309px #0030ff, -18px 310px #001aff, -20px 311px #0003ff, -22px 312px #1400ff, -23px 313px #2b00ff, -25px 314px #4200ff, -27px 315px #5900ff, -28px 316px #7000ff, -30px 317px #8700ff, -32px 318px #9e00ff, -33px 319px #b500ff, -35px 320px #cc00ff, -36px 321px #e300ff, -38px 322px #fa00ff, -39px 323px #ff00ed, -41px 324px #ff00d6, -42px 325px #ff00bf, -43px 326px #ff00a8, -45px 327px #ff0091, -46px 328px #ff007a, -47px 329px #ff0063, -48px 330px #ff004d, -49px 331px #ff0036, -50px 332px #ff001f, -51px 333px #ff0008, -52px 334px #ff0f00, -53px 335px #ff2600, -54px 336px #ff3d00, -55px 337px #ff5400, -55px 338px #ff6b00, -56px 339px #ff8200, -57px 340px #ff9900, -57px 341px #ffb000, -58px 342px #ffc700, -58px 343px #ffde00, -58px 344px #fff500, -59px 345px #f2ff00, -59px 346px #dbff00, -59px 347px #c4ff00, -59px 348px #adff00, -59px 349px #96ff00, -60px 350px #80ff00, -59px 351px #69ff00, -59px 352px #52ff00, -59px 353px #3bff00, -59px 354px #24ff00, -59px 355px #0dff00, -58px 356px #00ff0a, -58px 357px #00ff21, -58px 358px #00ff38, -57px 359px #00ff4f, -57px 360px #00ff66, -56px 361px #00ff7d, -55px 362px #00ff94, -55px 363px #00ffab, -54px 364px #00ffc2, -53px 365px #00ffd9, -52px 366px #00fff0, -51px 367px #00f7ff, -50px 368px #00e0ff, -49px 369px #00c9ff, -48px 370px #00b3ff, -47px 371px #009cff, -46px 372px #0085ff, -45px 373px #006eff, -43px 374px #0057ff, -42px 375px #0040ff, -41px 376px #0029ff, -39px 377px #0012ff, -38px 378px #0500ff, -36px 379px #1c00ff, -35px 380px #3300ff, -33px 381px #4a00ff, -32px 382px #6100ff, -30px 383px #7800ff, -28px 384px #8f00ff, -27px 385px #a600ff, -25px 386px #bd00ff, -23px 387px #d400ff, -22px 388px #eb00ff, -20px 389px #ff00fc, -18px 390px #ff00e6, -16px 391px #ff00cf, -14px 392px #ff00b8, -13px 393px #ff00a1, -11px 394px #ff008a, -9px 395px #ff0073, -7px 396px #ff005c, -5px 397px #ff0045, -3px 398px #ff002e, -1px 399px #ff0017` ); console.info("Read the article for more info!");

Everyone knows you can use console.log() to log text and variables to the console. Did you know you could also render (limited) CSS, SVGs, and even HTML in it?!? I didn’t! It’s a neat technique that can delight the curious and further your brand for curious users.

If you’re in a browser other than Safari, open up the DevTools console to see some examples of what we can create!

How to use CSS, SVGs, and HTML in a console message

Here’s the magic: %c. It lets us render a console message (like console.log or console.info) using a bit of CSS!

Should I use console.log or console.info?

Console logs are generally used for debugging purposes while console infos are used for information that is more relevant to end users. The only difference in terms of how they’re handled by browsers are some styling differences. For the purpose of an effect like the ones discussed in this article, I think console.info makes more sense.

Let’s see how it works.

Here’s the console.info from the online version of Adobe Photoshop (partially unminified):

console.info(
  '%c %cAdobe %cPhotoshop Web%c  %c2023.23.0.1%c  %c037a8af9746',
  'padding-left: 36px; line-height: 36px; background-image: url("data:image/gif;base64,R0lGODlhIAAgAPEBAAAAAP///wAAAAAAACH5BAEAAAIALAAAAAAgACAAAAKkhC+py3zfopxGvIsztsCGD4La2FVAGBoBuZnox45WcqLsum5KDWdvf1nwTo+fLbgDqo7LFCJJbOY0oidt6ozVKrtib0qaCnlYcJh7rf5iK6HZaM64VeS6L+pWf89WT+6vRAUBBVQ1gpOTJ4IYdxCnOBSJ8ZhkZNekk5ZSxpTpt6Y1eEVm00j3VALDmBXVyPEJB2r2ShoLh2ASqvU60dsr5yuBUQAAOw=="); background-size: 32px; background-repeat: no-repeat; background-position: 2px 2px',
  'background: #666; border-radius:0.5em 0 0 0.5em; padding:0.2em 0em 0.1em 0.5em; color: white; font-weight: bold',
  'background: #666; border-radius:0 0.5em 0.5em 0; padding:0.2em 0.5em 0.1em 0em; color: white;',
  '',
  'background: #c3a650; border-radius:0.5em; padding:0.2em 0.5em 0.1em 0.5em; color: white;',
  '',
  'background: #15889f; border-radius:0.5em; padding:0.2em 0.5em 0.1em 0.5em; color: white;'
);

Here’s what it looks like in Chrome and Edge (I use dark mode):

You can probably already guess, the %cs correspond to the strings that follow. Each one starts a new element that has display: inline.

The SVG is rendered as a data:image. Any data image works here!

For example…

Container Queries and Units

Zach Saucier — Thu, 21 Dec 2023 15:41:02 +0000

Container queries are similar to media queries but allow you set styles based on a particular element’s current size, typically the width. This is super handy because you can write CSS in a way that gives flexibility to the layout!

With @media queries, there’s a tight coupling of the styling of a component’s content and the size of the browser window. This means that the styles within a given component depend on the layout.

With @container queries, we can instead tightly couple the styling of a component’s content with the size of the component itself, regardless of how that component fits into the larger layout. In short, you can set up components to respond to the container size without having to know the breakpoints of the overall page layout. Yay for increased isolation!

Let’s think through an example to illustrate this. Pulling from Michelle Barker’s helpful MDN article about container queries, here’s a mockup:

When there’s more width available, each article preview has the image on the left and copy on the right. When there’s less room available, it stacks the image on top of the content.

Without container queries, we’d have to specify which cards we want to have the vertical layout, which ones should have the horizontal layout, and which should have a bigger image explicitly. When you then consider all possible screen sizes and container layouts, this quickly becomes quite complicated.

Additionally, if there’s a possibility for the sidebar to be collapsed or if you sometimes need to show additional content (like ads) alongside this content, it gets even more complex! Not to mention when the layout gets changed to something else, like switching from 4 columns to 3, you have to go back and adjust everything.

Container queries can help us more easily address this sort of situation in a much more manageable way!

Container queries are separate from, but can be in used in combination with, the contain property The contain property is useful for performance and preventing re-renders and, crucially, the thing that made @container queries possible under the hood.

Block and inline sizing

Before diving further into container queries, it’s important to make sure we have a good understanding of block and inline sizing as it has a large impact on the container-type and the container unit(s) we use.

Inline size is equivalent to width for horizontal writing mode and equivalent to the height for vertical writing modes. The block size is the respective opposite.

Make sure you keep this in mind! The terms “block” and “inline” are from the concept of “logical properties” and the direction CSS has been heading for a while.

How to use container queries

To use container queries, you must first define a container-type and optionally a container-name.

The container-type can have a value of size, inline-size, or normal.

size establishes a query container for the inline and block dimensions as well as for style (which we cover at the end of this article).
inline-size establishes a query container for the inline dimensions as well as for style. You’ll likely use this 99% of the time.
normal establishes a query container only for style.

One potential gotcha is that if you use container-type: size you need to add an explicit height. It will ignore the height of children elements. This is how it is specced to behave.

Most often, using container-type: inline-size probably makes the most sense.

The container-name is a value of the type (essentially some name you make up).

You can also use the container shorthand to define both properties. Such as:

.my-component {
  container: my-component / inline-size;
}

When using a container query or container query unit (which we will cover more in later sections), it will reference the nearest container in its ancestry tree unless you specify a particular container by including the container-name.

Once you’ve defined a container, you can use a @container query and select any descendant elements inside of it. For example:

@container (min-width: 500px) {
  .my-component p {
    font-size: 1.5rem;
  }
}

Or, if you want to use the container name in the query:

@container my-component (min-width: 500px) {
  .my-component p {
    font-size: 1.5rem;
  }
}

Note that you cannot style the element that is being queried inside of the container query itself (like .my-component {} in this case). But you can use it as a part of a more complex selector as seen above.

But you don’t have to refer to the container element in the selector, meaning this is also valid:

@container my-component (min-width: 500px) {
  p {
    font-size: 1.5rem;
  }
}

You can also use nesting.

.my-component {
  @container (min-width: 500px) {
    p {
      font-size: 1.5rem;
    }
  }
}

`orientation` and `aspect-ratio`

Instead of using explicit container sizes for container queries, we can also make use of orientation and its more generic form, aspect-ratio.

For example, here’s a Pen where we have the image on the left for larger screens and on top for smaller screens (a non-aspect ratio version of this sort of thing is in the section below).

CodePen Embed Fallback

When using aspect-ratio, remember that it’s width divided by the height, so aspect-ratio < 1/1 would be when the width is larger than the height (this example is equivalent to orientation: landscape). You can also use min-aspect-ratio or max-aspect-ratio instead of plain aspect-ratio and a comparison symbol.

Note that orientation and aspect-ratio can only be used with a container-type of size because it uses the container’s width and height. Setting a height is not typically a great idea for any template-based design where content can change.

What are container query units?

Container query units are an addition to the container query specification that provides units based on the container’s dimensions. This is handy for sizing pieces of a component based on the component’s container size.

What’s more, you’re not restricted to using container query units inside of container queries. You can use them anywhere a container is specified! That means that in some cases you can get away with just setting a property’s value to something that uses a container query unit and just leave it at that.

A shortened name for container query units?

“Container query units” is kind of a mouthful to say. Given that they can be used outside of container queries (so long as a container is defined), I think we can refer to these as “container units” like Chris Coyier did when he wrote about them a while back. I’m going to call them that for the rest of this article.

Available container units

Here’s the list of container units we currently have access to:

cqw: 1% of a query container’s width
cqh: 1% of a query container’s height
cqi: 1% of a query container’s inline size
cqb: 1% of a query container’s block size
cqmin: The smaller value of either cqi or cqb
cqmax: The larger value of either cqi or cqb

The width and height values are pretty straightforward to use. However, keep in mind that cqh will only use a container height if the container has a container-type of size. If inline-size is used, it will base its height on the nearest container with container-type: size, which might be the viewport.

Of these units, cqi will probably be the most commonly used unit for those who want to build websites for international audiences. For horizontal languages, it is equivalent to cqw. But it automatically switches to use cqh for vertical languages.

If you’re still not sure what inline means vs block here, maybe spend more time in the section above.

Use cases for container queries and container units

Let’s take a quick look at some use cases for container queries and container units!

Changing a component’s layout based on how much space is available

Perhaps the most common use case for container queries is to change the layout of a component’s contents based on the container’s size. Paired with ways of doing layouts like flex and grid, it can make creating pages that respond to different viewport sizes even easier.

CodePen Embed Fallback

Accessibility note: It’s best to keep the logical order of elements in the markup.

Taken to an extreme, you can make HTML and CSS components function kinda like an SVG like Dan Christofi did:

CodePen Embed Fallback

Adding non-vital detail when there’s more space available

In addition to changing the layout, sometimes it makes sense to hide some of the less important information or decorative elements when a component is smaller.

A great example of this is Chris Coyier’s calendar layout demo, where the vital parts of the calendar are kept for the smallest size but the rest is hidden:

CodePen Embed Fallback

(You may want to open this one full screen to have play.)

Fluid typography

Fluid typography is the concept of defining font sizes in a way where the type automatically scales based on some dimension between pre-defined bounds. In the past this has been based on the viewport width, but container query units make this concept a lot more powerful!

Check out this demo by Chris Coyier where you can drag to divvy up width between two elements, both with responsive type sizes:

CodePen Embed Fallback

Stephanie Eckles wrote a more in-depth article about using container query units for typography that I highly recommend!

When to use media queries instead

Content queries and units free us up from having to always use breakpoints that are tied to the layout. However, there are cases where you want content to update based on the layout! That’s when you should still use media queries—so content can be updated across multiple components at the same time.

Another time to use media queries is when you’re wanting to check certain device features, such as @media (not(hover)) { ... } or @media (not (color)) { ... } (which checks if the display is monochrome).

Browser support and style queries

Container queries for sizing have pretty solid browser support these days, as do container units.

There’s also discussion around creating style container queries. This would make certain things easier, like alternating between nested italic and normal text. Since the values of CSS variables can also be used in style queries, they could also be used as a more legitimate alternative to the CSS variable/custom property toggle hack. But at the moment they are only partially supported in WebKit-based browsers.

Conclusion

Container queries and container units enable us to create more isolated components. This makes it easier for components to be used across multiple pages, layouts, and systems. They’re prime for use in design systems!

If you’re interested in what other new CSS features I used when recreating my blog, check out my blog post about the process.

Bonus demo

This demo by SitePoint shows responsive layout paired with container queries to inspire you further!

CodePen Embed Fallback

Frontend Masters Boost RSS Feed

console.delight

How to use CSS, SVGs, and HTML in a console message

Container Queries and Units

Block and inline sizing

How to use container queries

orientation and aspect-ratio

What are container query units?

A shortened name for container query units?

Available container units

Use cases for container queries and container units

Changing a component’s layout based on how much space is available

Adding non-vital detail when there’s more space available

Fluid typography

When to use media queries instead

Browser support and style queries

Conclusion

Bonus demo

`orientation` and `aspect-ratio`