[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"\u002Farticles\u002Fnice-trick-for-alerts":3},{"id":4,"title":5,"body":6,"date":61,"description":62,"extension":63,"head":64,"imageUrl":30,"meta":65,"navigation":66,"ogImage":64,"path":67,"robots":64,"schemaOrg":64,"seo":68,"sitemap":69,"stem":70,"__hash__":71},"articles\u002Farticles\u002F22.Nice-trick-for-alerts.md","Nice trick for alerts",{"type":7,"value":8,"toc":58},"minimark",[9,13,25,38,46,55],[10,11,5],"h1",{"id":12},"nice-trick-for-alerts",[14,15,16,17,24],"p",{},"Found this in ",[18,19,23],"a",{"href":20,"rel":21},"https:\u002F\u002Fx.com\u002Fpqoqubbw\u002Fstatus\u002F1988028842515063148",[22],"nofollow","Dmytro's tweet",".",[26,27,31],"v-image",{":hasBorder":28,":rounded":28,"alt":29,"src":30},"true","Alert highlighting idea","\u002Fimg\u002Fnice-trick-alerts\u002Fhighlight-idea.png",[32,33,35],"template",{"v-slot:description":34},"",[14,36,37],{},"Different text highlight colors for different alert types",[14,39,40,41,45],{},"The idea is to use different text selection styling depending on alert color. The core mechanism is the ",[42,43,44],"code",{},"::selection"," pseudo-element.",[26,47,50],{":hasBorder":28,":rounded":28,"alt":48,"src":49},"Code example with ::selection","\u002Fimg\u002Fnice-trick-alerts\u002Fselection-code.png",[32,51,52],{"v-slot:description":34},[14,53,54],{},"Example implementation using the ::selection pseudo-element",[14,56,57],{},"It looks good, but still needs WCAG contrast checks.",{"title":34,"searchDepth":59,"depth":59,"links":60},2,[],"2026-01-28T10:00:00+04:00","A neat alert text selection trick using ::selection, with caution to validate contrast for accessibility.\n","md",null,{},true,"\u002Farticles\u002Fnice-trick-for-alerts",{"title":5,"description":62},{"loc":67},"articles\u002F22.Nice-trick-for-alerts","QlOi8rZBkjNyMOtWH-qUhK15apK8yXUJNxl6kmdTZRs"]