Ka dhig wajiga gadaasha dusha sare adoo adeegsanaya CSS

Haddii aad isticmaasho waxyaabo ay ka mid yihiin iskudhaf (taas oo ah qaanuunka xilliyada waxqabadka GDPR) oo aad rabto inaad jilciso aagga ka dambeeya dusha sare, tusaale ahaan, waxaad badanaa la kulantaa dhibaatada xaaladda xajinta . Tusaale ahaan, haddii aad leedahay curiyeyaal gabi ahaanba taagan ama meel go'an ku jira, waxaa si lama filaan ah loogu soo bandhigayaa si ka duwan sidii iyada oo aan la helin shaandheyn la dalbaday. Laakiin dawo ayaa jirta.


Koodhka soo socdaa wuxuu muujinayaa tusaalahan. Santuuqa gadaashiisa dhab ahaan waa in lagu dhejiyaa dhinaca kore ee midig, laakiin waa la dhaqaajiyaa:

See the Pen CSS BLUR STACKING CONTEXT #1 by David Vielhuber (@vielhuber) on CodePen.

W3C-da ayaa si cad u leh: "Khalad ma ahan, waa muuqaal." . The faahfaahinta sharxayaa xidhiidhka:

A value other than none for the filter property results in the creation of a containing block for absolute and fixed positioned descendants unless the element it applies to is a document root element in the current browsing context. The list of functions are applied in the order provided.

Doodda ku saabsan GitHub sidoo kale waa u qalantaa akhrin.

Waxyaabaha soo socda ee CSS waxay abuurayaan xaalad is dulsaar ah oo cusub, sidaas darteed cunsurrada gabi ahaanba ama si habeysan u dejistooda dambe uma dhaqmi doonaan marka loo eego aragtida, laakiin waxay ka mid yihiin walxaha la sifeeyay:

  • filter
  • transform
  • backdrop-filter
  • perspective
  • contain
  • transform-style
  • will-change

Laakiin waxaa jira xalka dhibaatada asalka ah: CSS hantida gadaal-shaandheynta (oo dhab ahaantii loo yaqaan qayb ahaan kala-shaandhaynta qaybaha ka dambeeya walxaha) waxay ku qabataa waxa aan halkan ka rabno. Xaalad cusub oo is dulsaar ah ayaa sidoo kale halkaan lagu soo saaray, laakiin tani waa mid aan khusayn maadaama aysan jirin cunug cunsur ku jira sheyga beenta ah:

See the Pen CSS BLUR STACKING CONTEXT #2 by David Vielhuber (@vielhuber) on CodePen.

Dib u laabo