CSS अपडेट: टेक्स्ट डेकोरेशन और अंडरलाइन स्टाइलिंग के लिए नए प्रॉपर्टीज

परिचय

नए टेक्स्ट-डेकोरेशन प्रॉपर्टीज की शुरुआत के साथ, हम पहले से कहीं अधिक तरीकों से टेक्स्ट को स्टाइल कर सकते हैं। text-decoration अब text-decoration-thickness, text-decoration-color, text-decoration-line, और text-decoration-style के लिए शॉर्टहैंड है। text-decoration-skip, text-decoration-skip-ink, text-underline-offset, और text-underline-position को स्पष्ट रूप से निर्दिष्ट करने की आवश्यकता है।

सिंटैक्स

selector {
  text-decoration: /* value */;
}

उदाहरण 1: बुनियादी टेक्स्ट डेकोरेशन स्टाइल्स

<!DOCTYPE html>
<html>
<head>
  <style>
    #one {
      text-decoration-style: double;
      text-decoration-skip-ink: auto;
    }
    p {
      padding: 2%;
      text-decoration-line: underline overline;
      text-decoration-style: wavy;
    }
    p:nth-of-type(even) {
      text-decoration: overline;
    }
    span {
      text-decoration: line-through;
    }
  </style>
</head>
<body>
  <p id="one">Random Demo abcdefghijklmnopqrstuvwxyz</p>
  <p>Random Demo Text</p>
  <p>Random <span>Demo</span> Text</p>
</body>
</html>

उदाहरण 2: एडवांस्ड अंडरलाइन कस्टमाइजेशन

<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      margin: 3%;
      font-size: x-large;
      text-decoration-line: underline overline;
      text-decoration-style: dotted;
      text-decoration-skip-ink: none;
      text-decoration-thickness: 4px;
    }
  </style>
</head>
<body>
  <p>Super Demo abcdefghijklmnopqrstuvwxyz</p>
</body>
</html>

मुख्य प्रॉपर्टीज समझाया गया

व्यावहारिक उपयोग के मामले

• हाइपरलिंक स्टाइलिंग: कस्टम अंडरलाइन रंग, ऑफसेट, और होवर प्रभाव
• टाइपोग्राफी एन्हांसमेंट: पठनीयता के लिए वेवी या डॉटेड अंडरलाइन
• संपादन मार्कअप: हटाए गए टेक्स्ट के लिए स्ट्राइकथ्रू, सम्मिलन के लिए अंडरलाइन
• सांस्कृतिक टाइपोग्राफी: text-underline-position: under वंशज ग्लिफ्स (जैसे हिंदी, अरबी) के लिए

ब्राउज़र सपोर्ट

अधिकांश मॉडर्न ब्राउज़र इन प्रॉपर्टीज को सपोर्ट करते हैं। text-underline-offset और text-decoration-thickness के लिए, IE में सपोर्ट सीमित है लेकिन सभी मॉडर्न ब्राउज़र (Chrome 87+, Firefox 70+, Safari 12.1+, Edge 87+) में काम करता है।