CSS-ի նոր հնարավորությունները վեբ-դիզայնը դուրս են բերում ուղղանկյուններից

Համացանցում 30-ամյա ուղղանկյուն դասավորության կախվածությունը սկսում է թուլանալ։ CSS-ի երեք համեմատաբար նոր հնարավորություն՝ shape() ֆունկցիան և border-shape ու corner-shape հատկությունները, ավելի լայն պալիտրա են տալիս իրար վրա դրված արկղերից չկազմվող էջերի համար։

SVG-ից մինչև shape()

Երբ World Wide Web Consortium-ը 1996 թվականին հրապարակեց դասավորության իր առաջին ստանդարտը, էջերը կրկնում էին թերթերի ու գիտական հանդեսների ցանցային դիզայնը։ Զննարկիչները երիտասարդ էին, գրաֆիկան՝ պարզունակ, և տեքստը ուղղանկյան ներսում հոսեցնելը ամենաապահով ընտրությունն էր։

Արկղայնությունը առաջին անգամ կոտրեց SVG-ն։ Թվային կոորդինատներով մշակողները գծում էին կորեր, ալիքաձև գծեր և կամայական ձևեր, սակայն SVG-ն մնում էր էջում տեղադրված canvas-ին կապված, իսկ դասավորությունը կառավարում էր CSS-ը։ path() ֆունկցիան կապեց այդ երկու աշխարհները՝ SVG-ն ուղղակիորեն ներդնելով CSS-ի մեջ, բայց այն չէր արձագանքում էջի չափի փոփոխությանը և չէր հասկանում փոփոխականներ կամ CSS-ի չափման միավորներ. յուրաքանչյուր կոորդինատ պետք է գրվեր պիքսելներով։

Ինչ են փոխում shape() և border-shape

shape()-ը ցանկալի ձևի կամ հետագծի երկրաչափական կոորդինատների ամբողջություն է, որը SVG-ի փոխարեն հիմնված է հարմարվող CSS շարահյուսության վրա։ Գոյություն ունեցող clip-path հատկության հետ միասին այն օգտագործվել է տոմսերի կտրոններ, չատի փուչիկներ և այլ ոչ ուղղանկյուն տարրեր ստեղծելու համար։

border-shape հատկությունը shape()-ում սահմանված CSS-ին բնիկ կոորդինատները կիրառում է էջի սահմանների վրա։ Սահմանեք կոորդինատները մեկ անգամ, և սահմանները գծանշվում են էջի վրա ռենդերինգի վաղ փուլում։ «CSS-ի ձևերի վրա սահմաններ դնելը մանկական խաղ կդառնա», գրել է CSS մշակող Temani Afif-ը, ով իրեն CSS հաքեր է անվանում, CSS-Tricks-ում հրապարակված ձեռնարկում։

Afif-ի ցուցադրությունները մեկ ուրվագծով չեն սահմանափակվում. դիզայներները կարող են էջը կտրել ցանկացած ձևով, սահմաններ տեղադրել սահմանների ներսում և լրացնել արտաքին ու ներքին ձևերի միջև եղած տարածությունը՝ ստեղծելով կտրվածքներ, օրինակ՝ բաց սիրտ քառակուսի արկղի ներսում՝ միայն CSS-ի միջոցով։

corner-shape և զննարկիչների աջակցություն

Նրանց համար, ովքեր չեն ուզում կոորդինատները ձեռքով գրել, ուղեկցող corner-shape հատկությունն առաջարկում է նախապես սահմանված նախշեր. դրանց մեծ մասը ստանդարտ արկղի տարբերակներ են՝ կլորացված եզրեր, շեղ եզրեր, կտրվածքներ, խորշեր և «squircle» անունով հայտնի ձև։

caniuse.com-ի տվյալներով՝ shape()-ին այժմ աջակցում են բոլոր հիմնական զննարկիչները։ border-shape-ը և corner-shape-ը դեռ ներդրվում են և համարվում են փորձարարական, սակայն Chrome-ի, Edge-ի և Opera-ի ընթացիկ թողարկումները ստանդարտն արդեն աջակցում են։ Մնացած աշխատանքը, ինչպես նշվում է հրապարակման մեջ, մշակողներինն է։