आप किस HTML5 रीसेट सीएसएस का उपयोग करते हैं और क्यों? [बन्द है]

Question

आप किस HTML5 रीसेट सीएसएस का उपयोग करते हैं और क्यों? क्या कोई ऐसा है जिसे आपने अधिक मामलों को कवर करने के लिए पाया है?

मैंने एचटीएमएल 5 डॉक्टर का उपयोग करना शुरू कर दिया है: http://html5doctor.com/html-5-reset-stylesheet/ यह काम करने लगता है, लेकिन मैं सोच रहा हूं कि क्या वहाँ कुछ बेहतर है।

Comments

इसी तरह के: stackoverflow.com/questions/3277671/css-reset-for-html5

— मार्क बायर्स

यह हाँ के समान है, लेकिन मैं इसे किसी एक को संशोधित करने के बजाय किसी अन्य का उपयोग करने के लिए देख रहा हूं ताकि इसे बाद की तारीख में काम कर सके, अगर जरूरत है, तो मैं बस एक नए संस्करण की प्रतिलिपि बना सकता हूं।

— डैरिल हेन

D_N मैं समझता हूं कि, लेकिन HTML5 का CSS पर प्रभाव है, विशेष रूप से एक रीसेट CSS पर जहां अब आपको अन्य टैग्स जैसे कि नौसेना या एक तरफ शामिल करने की आवश्यकता है।

— डेरीएल हेन

Answer 1

वास्तविक बात: मार्कडाउन के बावजूद काकाई सही है, आपको केवल * पेडिंग और मार्जिन को 0 पर रीसेट करना होगा।

हालांकि दुर्भाग्य से हममें से 99% के पास संसाधन या मैन पावर नहीं है कि वे सैकड़ों ब्राउज़र संस्करणों को बनाए रखें। इसलिए विशिष्ट वेबसाइट के लिए एक रीसेट शीट आवश्यक है।

html5reset: (यह बहुत हस्तक्षेप कर रहा है)

मैंने बस http://html5reset.org/ पर एक नज़र डाली

img,
object,
embed {max-width: 100%;}

तथा:

html {overflow-y: scroll;}

मैं समझता हूं कि इसके अच्छे इरादे हैं, लेकिन यह रीसेट शीट का काम नहीं है। यह बहुत सारी धारणाएं बना रहा है।

BluePrint रीसेट: (शाब्दिक रूप से एक खाका)

body {
  line-height: 1.5;
  background: white;
}

1.5 के साथ व्हाट्सएप करें। और पृष्ठभूमि सफेद क्यों? (मुझे पता है कि यह सही करने के लिए है लेकिन अभी भी आवश्यक नहीं है)

Normalize.css: (सामान्य नहीं)

https://github.com/necolas/normalize.css/blob/master/normalize.css

यह कुछ वेबकिट / यानी हैक के साथ अच्छा है लेकिन

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

h2 {
    font-size: 1.5em;
    margin: 0.83em 0;
}

h3 {
    font-size: 1.17em;
    margin: 1em 0;
}

h4 {
    font-size: 1em;
    margin: 1.33em 0;
}

h5 {
    font-size: 0.83em;
    margin: 1.67em 0;
}

h6 {
    font-size: 0.75em;
    margin: 2.33em 0;
}

हर हेडर टैग लक्षित होता है। और वे शरीर की लाइन-ऊंचाई को रीसेट नहीं करते हैं।

मुझे यकीन है कि उपरोक्त सभी का इरादा अच्छी तरह से काम करता है, लेकिन संभवतः आवश्यकता से अधिक ओवरराइड किया जाएगा।

एरिक मेयर

YUI

HTML5Boilerplate

ऊपर Boilerplate के साथ पेशेवरों के लिए और अधिक कर रहे हैं (अधिक दोस्ताना) पक्ष के लिए झुकाव मैं लोकप्रियता के कारण सुनिश्चित कर रहा हूँ। फिलहाल मेरे कस्टमाइज़ किए गए 80% बायलरप्लेट हैं।

मैं जा रहा हूँ हालांकि सभी तीन बिट द्वारा और अपना खुद का बनाते हैं, यह रॉकेट विज्ञान नहीं है।

Comments

ध्यान दें कि normalize.css अब तक बदल गया है; शीर्षकों के फ़ॉन्ट-आकार अब सेट नहीं किए गए हैं।

— रुबेर वेरबाग

यह सभी ध्यान देने योग्य है कि Normalize.cs केवल डेस्कटॉप ब्राउज़र ही नहीं बल्कि मोबाइल ब्राउज़र जैसे iOS सफारी, एंड्रॉइड के लिए क्रोम, स्टॉक ब्राउज़र, एट अल।, जो अपने आप में अद्वितीय हैं। इस कारण और अन्य सामान्यीकृत कई लोकप्रिय रूपरेखाओं में बेक किए गए हैं।

— मैट स्मिथ

मैं 'एरिक मेयर' का उपयोग करता था, लेकिन अब 'YUI' रीसेट स्टाइल शीट का उपयोग इस वजह से करता है: danielsokolowski.blogspot.ca/2012/11/…

— डैनियल

Answer 2

Normalize.css डेस्कटॉप और मोबाइल ब्राउज़र दोनों के लिए बहुत अच्छा है और कई लोकप्रिय HTML टेम्पलेट्स में उपयोग किया जाता है।

लेकिन allसीएसएस संपत्तियों का उपयोग करने के बारे में क्या है जो सीएसएस गुणों को छोड़कर directionऔर रीसेट करता है unicode-bidi? इस तरह आपको किसी अतिरिक्त फाइल को शामिल करने की आवश्यकता नहीं है:

{
    all: unset
}

allआईई / एज को छोड़कर सीएसएस का व्यापक समर्थन है। इसी के साथ unset।

Comments

दिलचस्प है, लेकिन यह सबसे धीमा समाधान है और केवल फ़ायरफ़ॉक्स में समर्थित है, इस प्रकार इसका कोई वास्तविक उपयोग नहीं है (कम से कम इस समय)।

— tomasz86

यह सच है कि केवल फ़ायरफ़ॉक्स अभी इसका समर्थन कर रहा है, लेकिन मुझे लगता है कि इसके पास माडर्निज़्र जैसे समाधानों को समाप्त करने का एक अच्छा मौका है। github.com/Modernizr/Modernizr/issues/1219

— मैट स्मिथ

Answer 3

Reset.css द्वारा प्रयोग किया जाता खाका सीएसएस ढांचे में अच्छी तरह से काम करता है और एचटीएमएल 5 तत्व शामिल हैं। यह उनके screen.css फ़ाइल में शामिल हो जाता है ।

ब्लूप्रिंट नई साइटों के तेजी से प्रोटोटाइप के लिए एक उपयोगी संसाधन है, और उनका स्रोत कोड अच्छी तरह से संगठित और सीखने लायक है।

Answer 4

एरिक मेयर ने अपने CSS रीसेट का v2 भी जारी किया (और अब से लगभग एक साल पहले उन्होंने ऐसा किया था):

http://meyerweb.com/eric/tools/css/reset/

Comments

सरल अभी तक प्रभावी है, और * सार्वभौमिक चयनकर्ता पर भरोसा है कि रीसेट से भी तेज।

— tomasz86

Answer 5

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

Normalize.css

Answer 6

* {
    margin: 0;
    padding: 0;
}

सरल अभी तक पूरी तरह से प्रभावी। शायद में फेंक:

body {
    font-size: small;
}

अच्छे मापन के लिए।

Comments

डिफ़ॉल्ट मार्जिन को ज़प करना और प्रपत्र नियंत्रणों पर पैडिंग करना अवांछित प्रभाव हो सकता है और नामित आकार के कीवर्ड का ब्राउज़र में संपूर्ण व्यवहार नहीं होता है। यह अत्यधिक सरलीकृत है। यह HTML 5 में शुरू किए गए तत्वों के लिए शैलियों को सेट करने में भी विफल रहता है, इसलिए वे बने रहते हैं display: inline।

— क्वेंटिन

मैं असहमत हूं। मार्जिन और पेडिंग केवल अप्रत्याशित गुण हैं। फ़ॉन्ट-आकार की प्रॉपर्टी विशेष रूप से उन ब्राउज़र को लक्षित करने के लिए एक नामित कीवर्ड का उपयोग करती है जो उन्हें पढ़ते हैं, जो हर प्रमुख ब्राउज़र ( डेवलपर . yahoo.com/yui/examples/fonts/fonts-size_source.html ) पर YUI फ़ॉन्ट स्केल को प्रभावी बनाता है । मैं भी तत्वों के सामान्य प्रवाह पर कभी भी थोपना नहीं चाहूंगा और इसलिए मैं उन HTML 5 तत्वों को अकेला छोड़ दूंगा, केवल उनके प्रदर्शन प्रकार या स्थिति को आवश्यकतानुसार बदलते हुए। मुझे लगता है कि मेरी पसंद अलोकप्रिय है, लेकिन यह अन्य समाधानों की तुलना में कहीं अधिक सुरुचिपूर्ण है और यह काम करता है।

— kaikai

नहीं नहीं नहीं नहीं नहीं! एचटीएमएल 5 तत्वों के पास डिस्प्ले प्रॉपर्टी सेट नहीं है, इसलिए वे शान से डिफ़ॉल्ट रूप से वापस आ जाते हैं display: inline। क्या आपने कभी एक साइट आरेख देखा है जहां हेडर, फुटर, नेविगेशन, साइड कॉलम, व्यावहारिक रूप से प्रत्येक पृष्ठ अनुभाग इनलाइन बह रहा है ??? सॉरी काकाई, लेकिन यह सिर्फ स्वीकार्य नहीं है!

— फिलिप डुपनोविक

यार, मैं एक HTML5 गुरु (अभी तक) नहीं हूं और मुझे पता है कि यह पूरी तरह से रीसेट करने का सही तरीका नहीं है।

— हिममानव

बिल्कुल वैध जवाब। एकमात्र दोष यह हो सकता है कि *चयनकर्ता धीमे हैं, मैंने सुना।

— एंटोन स्ट्रोगोनॉफ

Answer 7

HTML5 युक्ति में सीएसएस-सक्षम ब्राउज़रों के लिए अनुशंसित सीएसएस घोषणाएँ शामिल हैं। इसके मज़े के लिए मैंने उन्हें ले लिया और उन लोगों को वापस भेज दिया, जहां यह समझ में आता है। आप इस लेख में परिणाम देख सकते हैं ।

हालाँकि , मैं उत्पादन में इसका उपयोग करने की सलाह नहीं देता। यह अवधारणा का एक प्रमाण है और एक सर्व-उद्देश्य-रीसेट स्टाइलशीट के रूप में सेवा करने के लिए संकेत देने के लिए बेहतर उपयोग किया जा सकता है। इससे पहले कि कोई अन्य सुझाव बेहतर विकल्प हो सकता है।

Answer 8

मैं HTML5 डॉक्टर से नॉर्मलाइज़ या रीसेट का उपयोग करता हूं, और मैं जिस प्रोजेक्ट पर काम कर रहा हूं, उसे फिट करने के लिए इसे बदल देता हूं।

BTW यह केवल एक रीसेट का उपयोग करने की अवधारणा है जो कमोबेश एक मानक बन गया है।

Comments

क्या आपके पास कोई अतिरिक्त विवरण है?

— जेम्स ए मोहलर

मैं उन तत्वों को नहीं छोड़ता जो मैं आयन का उपयोग नहीं कर रहा हूं। उदाहरण के लिए यदि मैं प्रपत्रों का उपयोग नहीं कर रहा हूं तो मैं प्रपत्र तत्वों को हटा देता हूं। मुझे यकीन है कि आपको विचार मिलेगा। उन तत्वों को रीसेट करने का कोई मतलब नहीं है जो आप उपयोग नहीं कर रहे हैं।

— कोर्निशिन्जा

मेरी आवश्यकताओं को फिट करने के लिए रीसेट को संशोधित करने के बारे में मेरी बात का समर्थन करने के लिए: cssreset.com/which-css-reset-should-i-use

— cornishninja