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 waxay si cad halkan u leedahay: "Ma aha bug, waa sifo." Tilmaamuhu wuxuu 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 xal loo helo dhibkii asalka ahaa: shaandhaynta hantida CSS- ta (taas oo dhab ahaantii loo yaqaan qayb ahaan shaandhaynta meelaha ka dambeeya walxaha) waxa ay halkan ka samaynaysaa waxaad rabto. In kasta oo xaalad cusub oo is dulfuulan ay sidoo kale halkan ka abuurantay, ma khusayso maadaama aanay jirin canaasiir carruureed oo ku jira qaybta been-abuurka ah.:

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

Dib u laabo