5 naujos naujos CSS funkcijos ir kaip jomis naudotis

Puslapis 1 iš 2: Naršykite 5 naujas CSS funkcijas: 01–10 veiksmai

Šiame straipsnyje mes išnagrinėsime penkias naujas CSS ateinančias ypatybes, pažvelkime į tai, ką jie daro ir kaip jas praktiškai pritaikyti savo projektuose. Kursime svetainės išdėstymas puslapiui, kuriame yra naujienų kanalas ir nedidelis pokalbių laukelis kampe. Norėdami sužinoti daugiau CSS gudrybių, peržiūrėkite mūsų straipsnį, kuriame nagrinėjami skirtingi dalykai CSS animacijos pavyzdžiai .

Šiai pamokai jums reikės „Chrome 65+“ arba „Firefox 59+“. Pažvelkite į lydintis „GitHub“ repo žingsnis po žingsnio kodą. Norėdami sukurti geresnę patirtį ir išspręsti kai kurias problemas, pasinaudosime šiomis funkcijomis.



CSS rodymo modulis (3 lygis)



CSS sąlyginių taisyklių modulis (3 lygis)

CSS peržiūros elgesio modulis (1 lygis)



kaip skaitmeniniu būdu nuspalvinti eskizą

CSS selektorių modulis (4 lygis)

CSS talpinimo modulis (1 lygis)

01. Nustatykite naujienų kanalo HTML

Pirmiausia turime sukurti labai paprastą, pakartotinį naujienų kanalo žymėjimą. Sukurkime a .konteineris div su nesutvarkytu sąrašu viduje. Duok

    klasė .maitinti , tada sukurkite 10 sąrašo elementų, kurių kiekviename yra div su .kortelė klasės ir teksto kortelės 1, 2 kortelės ir kt.



    Pagaliau sukurkite dar vieną sąrašas-punktas tarp 5 ir 6 su klase .Lizdavo - tai bus naudinga vėliau - ir pridėkite a

      viduje su trimis sąrašo elementais, naudojant tekstą kortelės A, kortelė B ir kt.

      • Card 1
      • Card 2
      • Card 3
      • Card 4
      • Card 5
        • Card A
        • Card B
        • Card C
      • Card 6
      • Card 7
      • Card 8
      • Card 9
      • Card 10

      02. Suformuokite naujienų srautą

      Dabar turime pridėti keletą greitų stilių, kad tai pradėtų atrodyti labiau kaip naujienų kanalas. Pirmiausia galime duoti subtili pilka fono spalva. Tada duok .konteineris maksimalus 800 taškų plotis ir naudokite paraštė: 0 auto; į centrą jį sulygiuoti.

      Duokime ir mes .kortelė baltas fonas, 10 taškų užpildymas ir paraštė ir galiausiai a min aukščio 300 piks. - tai turėtų suteikti mums pakankamai, kad puslapį būtų galima slinkti. Galiausiai mes pabarstysime šiek tiek „Flexbox“ magijos .maitinti kad daiktai judėtų gražiai, su dviem kortelėmis iš eilės.

      .feed { display: flex; flex-wrap: wrap; } .feed li { flex: 1 0 50%; }

      03. Ištaisykite išdėstymo problemas

      Slinkdami žemyn sąraše pastebėsite, kad įdėtame sąraše esančios kortelės A-C kortelės kelia tam tikrų išdėstymo problemų. Idealiu atveju mes norėtume, kad jos įsilietų į likusias kortas, tačiau visos jos yra sulipusios į vieną bloką. Priežastis yra ta, kad lankstus konteineris, sukurtas naudojant ekranas: lankstus - tiesioginius savo vaikus (t. Y. Sąrašo elementus) paverčia lanksčiais elementais.

      Dabar paprastai vienintelis būdas tai išspręsti yra pakeisti žymėjimą, bet apsimeskime, kad jūs neturite tokios prabangos. Galbūt naujienų srauto žymėjimą sukuria trečiosios šalies scenarijus arba tai yra senas kodas, kurį bandote tik iš naujo ieškoti. Taigi, kaip mes galime tai išspręsti?

      Susitikti rodyti: turinį . Šis mažas vieno pamušalo elementas iš esmės priverčia elgtis taip, tarsi jo nebūtų. Jūs vis dar matote elemento palikuonis, tačiau pats elementas neturi įtakos išdėstymui.

      Kadangi mes apsimetame, kad negalime pakeisti žymėjimo (tik šiam žingsniui), galime būti šiek tiek protingi ir tai padaryti .kortelė elementai „flex“ elementus ir beveik visiškai nepaiso sąrašo žymėjimo.

      Pirmiausia pašalinkite esamą .šerti li klasę ir tada naudok rodyti: turinį abiems

        ir
      • elementai:

        .feed ul, .feed li { display: contents; }

        Dabar turėtumėte matyti, kaip kortos teka tvarkingai, bet mes praradome dydį. Ištaisykite tai pridėdami „flex“ savybę .kortelė vietoj to:

        .card { flex: 1 0 40%; }

        Ta-da! Dabar mūsų kortelės naudoja „Flexbox“ stebuklus, tarsi jų struktūrinio nesutvarkyto sąrašo žymėjimo nėra.

        Kaip šalutinį dėmesį, jums gali būti įdomu, kodėl lanksčiai vertė nustatyta 40%. Taip yra todėl, kad .kortelė klasėje yra marža, kuri nėra įtraukta į pločio skaičiavimą, kaip jūs tikėjotės naudodami dėžutės dydis: rėmelis . Norėdami tai išspręsti, tiesiog turime nustatyti lanksčiai pakankamai aukštas, kad būtų galima suvynioti reikiamoje vietoje, o „Flexbox“ automatiškai užpildys likusią vietą.

        04. Naršykite funkcijų užklausas

        Nors rodyti: turinį daro tiksliai tai, ko mums reikia, tai vis tiek yra tik „Work Draft“ būsenoje su W3C. „Chrome“ palaikymas pasiekė tik 65 versiją, išleistą 2018 m. Kovo mėn. Neįtikėtina, kad „Firefox“ palaiko nuo 2015 m. Balandžio!

        Jei „DevTools“ išjungsite stilių, pamatysite, kad mūsų pakeitimai šiek tiek sugadino maketą rodyti: turinį netaikoma. Taigi, ką mes galime padaryti? Laikas mūsų naujai naujai funkcijai - funkcijų užklausoms.

        Tai veikia kaip medijos užklausos, tačiau jos leidžia paklausti naršyklės, naudojant tik CSS, ar palaikoma nuosavybės ir vertės išraiška. Jei jie yra, bus taikomi užklausoje esantys stiliai. Dabar pajudėkime rodyti: turinį stilius į funkcijų užklausą.

        @supports (display: contents) { .feed ul, .feed li { display: contents; } .card { flex: 1 0 40%; } }

        05. Jei norite švaresnio rezultato, naudokite „ne“

        Paprastai tokiame laipsniško tobulinimo scenarijuje mes naudosime užklausą naujiems stiliams pridėti, tačiau tai taip pat turėtų išjungti kai kuriuos originalius stilius, reikalingus atsarginiam išdėstymui.

        Tačiau galite nuspręsti, kad kadangi funkcijų užklausų palaikymas yra gana geras (jei ignoruojate IE), iš tikrųjų norite naudoti funkcijos užklausą ne operatorius. Tai veikia taip, kaip jūs tikėjotės, todėl galime iš naujo pritaikyti originalą lankstytis ypatybė sąrašo elementams, kai rodyti: turinį nepalaikomas:

        „seagate“ išorinio kietojo disko juodojo penktadienio pasiūlymai
        @supports not (display: contents) { .feed li { flex: 1 0 50%; } }

        Viduje ne užklausą galime pridėti keletą stilių, kad .Lizdavo elementai iš esmės taiko tai, kas buvo paveldima naudojant rodyti: turinį .

        feed li.nested { flex-basis: 100%; } .feed li.nested ul { display: flex; flex-wrap: wrap; }

        06. Žengiant dar vieną žingsnį

        Jau galite pamatyti funkcijų užklausų potencialą, tačiau labai šaunu tai, kad galite derinti išraiškas naudodami tris galimus operatorius: ir , arba ir ne . Galbūt mes taip pat galėtume patikrinti ekranas: lankstus palaikymą ir tada pridėkite plūduriuojantį atsarginį variantą.

        Čia to nedarysime, bet jei būtume, pirmiausia modifikuotume dvi tokias funkcijų užklausas:

        @supports (display: flex) and (display: contents) { ... } @supports (display: flex) and (not (display: contents)) { ... }

        Kaip premiją taip pat galite patikrinti, ar palaikomos tokios savybės:

        @supports (--foo: green) { ... }

        07. Pridėti pokalbio langelį

        Dabar mes turime gražų naujienų kanalą, pridėkime mažą pokalbių dėžutę, pritvirtintą apatiniame dešiniajame ekrano kampe. Mums reikės pranešimų sąrašo ir teksto lauko, kad vartotojas galėtų įvesti savo pranešimą. Pridėkite šį bloką iškart po atidarymo žymė:

        • Message 1
        • Message 2
        • Message 3
        • Message 4
        • Message 5
        • Message 6
        • Message 7
        • Message 8
        • Message 9
        • Message 10

        08. Sukurkite pokalbio langelio stilių

        Laikas greitai pridėti stilių, kad jis atrodytų pusiau padorus.

        .chat { background: #fff; border: 10px solid #000; bottom: 0; font-size: 10px; position: fixed; right: 0; width: 300px; z-index: 10; } .messages { border-bottom: 5px solid #000; overflow: auto; padding: 10px; max-height: 300px; } .message { background: #000; border-radius: 5px; color: #fff; margin: 0 20% 10px 0; padding: 10px; } .messages li:last-child .message { margin-bottom: 0; } .input { border: none; display: block; padding: 10px; width: 100%; }

        09. Slinkimo grandinė

        Tikimės, kad dabar turėsite mažą pokalbių dėžutę su slinktu pranešimų sąrašu, esančiu jūsų naujienų kanalo viršuje. Puiku. Bet ar pastebėjote, kas atsitinka, kai slenkate įdėtoje srityje ir pasiekiate jos slinkties diapazono pabaigą? Pabandyk tai. Slinkite iki pranešimų pabaigos ir pamatysite, kad pats puslapis pradės slinkti. Tai vadinama slinkimo grandine.

        Mūsų pavyzdyje tai nėra didelis dalykas, tačiau kai kuriais atvejais tai gali būti. Turėjome apeiti šią funkciją anksčiau, kai kūrėme slenkamas sritis modaluose arba kontekstiniuose meniu.

        Nešvarus taisymas yra nustatyti į perteklius paslėptas , bet yra gražus, blizgus naujas CSS turtas, kuris visa tai sutvarko, ir tai yra paprastas vieno linijinio tinklo. Pasisveikink su perviršinis elgesys . Galimos trys vertės:

        • automatinis - Numatytasis, leidžiantis sukti grandinę
        • turėti - Išjungia slinkimo grandinę
        • nė vienas - Išjungia slinkimo grandinę ir kitus perlenkimo efektus (pvz., Guminį apvadą)

        Mes galime naudoti stenografiją perviršinis elgesys arba galime nukreipti konkrečią kryptį overcroll-behavior-x (arba -Y ). Pridėkime jį prie mūsų .pranešimai klasė:

        .messages { ... overscroll-behavior-y: contain; ... }

        Dabar bandykite slinkti dar kartą ir pamatysite, kad tai nebeturi įtakos puslapio slinkimui, kai pasieksite turinio pabaigą.

        Ši savybė taip pat yra labai patogu, jei norėtumėte įdiegti „PWA“ atnaujinimo funkciją, tarkime, kad atnaujintumėte naujienų kanalą. Kai kurios naršyklės, pvz., „Android“ skirta „Chrome“, automatiškai prideda savo ir iki šiol nebuvo paprasto būdo ją išjungti nenaudojant „JS“, kad atšauktumėte įvykius naudodami našumą paveikiančius ne pasyvius tvarkytuvus.

        Dabar tereikia pridėti overcroll-elgesys: yra į tikrinimo srities elementą, tikriausiai arba .

        Verta paminėti, kad ši nuosavybė nėra W3C standartas, veikiau žiniatinklio inkubatoriaus bendruomenės grupės (WICG) pasiūlymas. Vėliau bus svarstomi populiarūs, stabilūs ir subrendę WICG pasiūlymai dėl perėjimo į W3C darbo grupę.

        10. Sutraukti pokalbio langelį, kai jis nenaudojamas

        Šiuo metu pokalbių dėžutė užima nemažai vietos, kuri, jei nebendraujame, šiek tiek blaško dėmesį. Laimei, mes galime tai padaryti naudodami šiek tiek CSS magijos.

        Bet pirmiausia turime šiek tiek pakeisti esamus stilius. Pagal numatytuosius nustatymus norime, kad pokalbių langelis būtų sutrauktas, todėl turime sumažinti max-aukštis vertė .pranešimai klasė. Būdami ten taip pat galime pridėti perėjimą prie max-aukštis nuosavybė:

        .messages { ... max-height: 25px; transition: max-height 500ms; }

        Kitas puslapis: tęskite naujų CSS funkcijų tyrimą atlikdami 11–20 veiksmus

        • 1
        • du

        Dabartinis puslapis: Naršykite 5 naujas CSS funkcijas: 01–10 veiksmai

        Kitas puslapis Naršykite 5 naujas CSS funkcijas: 11–20 žingsniai