CSS
ब्राउज़र शैलियों को सामान्य बनाना

परिचय

टिप्पणियों

Normalize.css

ब्राउज़रों के पास सीएसएस शैलियों का एक डिफ़ॉल्ट सेट है जो वे तत्वों को प्रदान करने के लिए उपयोग करते हैं। इनमें से कुछ शैलियों को उदाहरण के लिए डिफ़ॉल्ट फ़ॉन्ट चेहरे और आकार परिभाषाओं को बदलने के लिए ब्राउज़र की सेटिंग्स का उपयोग करके भी अनुकूलित किया जा सकता है। शैलियों में परिभाषा होती है कि किन चीजों को ब्लॉक-स्तर या इनलाइन माना जाता है।

क्योंकि इन डिफ़ॉल्ट शैलियों को भाषा विनिर्देशों द्वारा कुछ लेवे दिए गए हैं और क्योंकि ब्राउज़र ठीक से चश्मे का पालन नहीं कर सकते हैं, वे ब्राउज़र से ब्राउज़र तक भिन्न हो सकते हैं।

यह वह जगह है जहाँ normalize.css खेलने में आता है। यह सबसे आम विसंगतियों को दूर करता है और ज्ञात बगों को ठीक करता है।

यह क्या करता है

• कई सीएसएस रीसेट के विपरीत उपयोगी डिफॉल्ट को संरक्षित करता है।
• तत्वों की एक विस्तृत श्रृंखला के लिए शैलियों को सामान्य करता है।
• कीड़े और सामान्य ब्राउज़र असंगतताओं को ठीक करता है।
• सूक्ष्म संशोधनों के साथ प्रयोज्यता में सुधार।
• बताते हैं कि विस्तृत टिप्पणियों का उपयोग करते हुए कोड क्या करता है।

तो, अपने प्रोजेक्ट में normalize.css को शामिल करने से आपका डिज़ाइन एक जैसे और अलग-अलग ब्राउज़रों में एक जैसा दिखाई देगा।

रीसेट करने के लिए अंतर ।css

आपने reset.css बारे में सुना reset.css । दोनों में क्या अंतर है?

जबकि normalize.css एकीकृत डिफॉल्ट्स के लिए अलग-अलग गुण सेट करके स्थिरता प्रदान करता है, रीसेट करता है। सभी बुनियादी स्टाइल को हटाकर स्थिरता प्राप्त करता है जो एक ब्राउज़र लागू हो सकता है। हालांकि यह पहली बार में एक अच्छे विचार की तरह लग सकता है, इसका वास्तव में मतलब है कि आपको सभी नियमों को स्वयं लिखना होगा, जो एक ठोस मानक होने के खिलाफ जाता है।

दृष्टिकोण और उदाहरण

CSS रीसेट ब्राउज़र डिफॉल्ट के लिए अलग-अलग दृष्टिकोण लेते हैं। एरिक मेयर का रीसेट सीएसएस कुछ समय के लिए रहा है। उनका दृष्टिकोण कई ऐसे ब्राउज़र तत्वों को शून्य कर देता है जिन्हें पीठ के ठीक ऊपर समस्याएँ उत्पन्न करने के लिए जाना जाता है। निम्नलिखित उसके संस्करण (v2.0 | 20110126) सीएसएस रीसेट से है।

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

एरिक मेयर का रीसेट सीएसएस

सीएसएस को दूसरे पर सामान्य करें और इनमें से कई के साथ अलग से काम करता है। निम्नलिखित कोड के संस्करण (v4.2.0) से एक नमूना है।

/**
 * 1. Change the default font family in all browsers (opinionated).
 * 2. Correct the line height in all browsers.
 * 3. Prevent adjustments of font size after orientation changes in IE and iOS.
 */

/* Document
   ========================================================================== */

html {
  font-family: sans-serif; /* 1 */
  line-height: 1.15; /* 2 */
  -ms-text-size-adjust: 100%; /* 3 */
  -webkit-text-size-adjust: 100%; /* 3 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers (opinionated).
 */

body {
  margin: 0;
}

/**
 * Add the correct display in IE 9-.
 */

article,
aside,
footer,
header,
nav,
section {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

सीएसएस को सामान्य करें