उपयोगकर्ता एजेंट स्टाइलशीट क्या है?

Question

मैं Google Chrome में एक वेब पेज पर काम कर रहा हूं। यह निम्नलिखित शैलियों के साथ सही ढंग से प्रदर्शित होता है।

table {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: gray;
}

यह ध्यान रखना महत्वपूर्ण है कि मैंने इन शैलियों को परिभाषित नहीं किया। Chrome डेवलपर टूल में, यह उपयोगकर्ता एजेंट स्टाइलशीट कहता है सीएसएस फ़ाइल नाम के स्थान पर ।

अब अगर मैं एक फॉर्म जमा करता हूं और कुछ सत्यापन त्रुटि होती है, तो मुझे निम्नलिखित स्टाइलशीट मिलेगी:

table {
    white-space: normal;
    line-height: normal;
    font-weight: normal;
    font-size: medium;
    font-variant: normal;
    font-style: normal;
    color: -webkit-text;
    text-align: -webkit-auto;
}

table {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: gray;
}

font-sizeइन नई शैली से मेरे डिजाइन परेशान कर रहा है। क्या मेरी स्टाइलशीट को बाध्य करने का एक तरीका है और यदि संभव हो, तो क्रोम की डिफ़ॉल्ट स्टाइलशीट को पूरी तरह से अधिलेखित करें?

Comments

क्रोम: उपयोगकर्ता एजेंट स्टाइलशीट सेटिंग्स को कैसे बंद करें?

— गिवंसी

ध्यान दें कि Chrome (51) पर आपको केवल दो टेबल प्रविष्टियाँ मिलती हैं, जब आपके पास एक doctype घोषणा नहीं होती है। अन्यथा, आप केवल दूसरा प्राप्त करते हैं।

— जॉन

अधिक उपकरणों में क्रोम कैश को साफ़ करें -> ब्राउज़िंग डेटा साफ़ करें

— doford

संबंधित पोस्ट यहाँ । यह समझना कि उपयोगकर्ता-एजेंट (या ब्राउज़र) शैली शीट उपयोगकर्ता से कैसे भिन्न है और लेखक शैली पत्रक आसानी से चीजों को समझने में मदद करेंगे।

— आरबीटी

Answer 1

लक्ष्य ब्राउज़र क्या हैं? अलग-अलग ब्राउज़र अलग-अलग डिफ़ॉल्ट सीएसएस नियम निर्धारित करते हैं। उन डिफ़ॉल्ट को हटाने के लिए CSS रीसेट, जैसे कि meyerweb CSS रीसेट या normalize.css , आज़माएं । Google "सीएसएस रीसेट बनाम मतभेदों को देखने के लिए सामान्यीकृत करें"।

Comments

मैं हमेशा अपने सीएसएस को हर परियोजना से पहले रीसेट / सामान्य करता हूं, इस तरह आपके पास ब्राउज़रों में "लगभग" स्तर का क्षेत्र है। मैंने कभी भी एक नकारात्मक "पक्ष-प्रभाव" के बारे में नहीं सुना है, मुझे यकीन है कि यदि आप Google पर त्वरित नज़र रखते हैं तो आप पाएंगे कि यह अनुशंसित है।

— ओलिवर मिलिंगटन

रीसेटिंग शैलियों में फॉर्म फ़ील्ड के साथ अजीब परिणाम हो सकते हैं, विशेष रूप से फ़ील्ड बॉर्डर्स या मल्टी-पार्ट एलिमेंट्स जैसे टाइप = "फ़ाइल"।

— अपने मॉड का अच्छी तरह से इलाज करें

हालांकि रीसेट / सामान्य करने में मदद मिल सकती है, यह वास्तव में इस सवाल का जवाब नहीं देता है कि उपयोगकर्ता एजेंट स्टाइलशीट क्यों बदल रहा है? मुझे एक ही समस्या है कि वे कहां पर यूए शैलियों एसईओ के लिए उपयोग किए जाने वाले पूर्व-गाया पृष्ठों के लिए अलग हो जाते हैं। कोई भी विचार क्यों बदल जाता है?

— यार्न

वेब पेज पर डिफ़ॉल्ट रूप से क्रोम सेट क्या देखें: trac.webkit.org/browser/trunk/Source/WebCore/css/html.css

— संतोष कुमार

यह कोई उत्तर नहीं है ... जोड़ना <!DOCTYPE>@Sebas द्वारा सही है

— अमित शाह

Answer 2

यदि <!DOCTYPE>आपकी HTML सामग्री गायब है, तो आप अनुभव कर सकते हैं कि ब्राउज़र आपके कस्टम स्टाइलशीट पर "उपयोगकर्ता एजेंट स्टाइलशीट" को वरीयता देता है। सिद्धांत जोड़ने से यह ठीक हो जाता है।

Comments

यह एक बड़ा संकेत है। आपने मुझे शोध के कुछ समय बचाया। वर्थ ने उल्लेख किया कि मेरे मामले में मेरे पास उस सिद्धांत की घोषणा थी, लेकिन मेरे पास पहले एक स्क्रिप्ट थी। ऐसा लगता है कि विचार में प्रवेश करने के लिए DOCTYPE को पृष्ठ में पहली बात होनी चाहिए।

— सेबास

जोड़ना <! DOCTYPE> ने मेरे पास एक बहुत ही अजीब tr / td वर्टिकल अलाइनमेंट समस्या हल की। इस उत्तर के लिए धन्यवाद।

— राल्फ टी

यह नाइटपैकिंग है, लेकिन <! DOCTYPE html> ने मेरे लिए समस्या तय की।

— स्टीव ज़ेलज़निक

मेरे पास <! DOCTYPE html> सक्षम था, लेकिन फिर भी इसे सामान्य करना था।

— एंटीकबड

@ChrisMorgan उस विनिर्देश से उद्धृत करता है जिससे आपने लिंक किया है: "DOCTYPEs को विरासत के कारणों की आवश्यकता होती है। जब छोड़ा जाता है, तो ब्राउज़र एक अलग रेंडरिंग मोड का उपयोग करते हैं जो कुछ विशिष्टताओं के साथ असंगत है। दस्तावेज़ में DOCTYPE को शामिल करना यह सुनिश्चित करता है कि ब्राउज़र बनाता है। प्रासंगिक विशिष्टताओं का पालन करने का सबसे अच्छा प्रयास "। एक आदर्श दुनिया में DOCTYPE आवश्यक नहीं होगा। लेकिन उत्तर का दावा करने के लिए "बस सच नहीं है" काफी बोल्ड IMHO है, खासकर अपवोट्स की संख्या को देखते हुए।

— जेस्पर मायगिंड

Answer 3

"यूजर एजेंट स्टाइल शीट" अवधारणा के बारे में, सीएसएस 2.1 कल्पना में अनुभाग कैस्केड से परामर्श करें ।

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

इसलिए यदि आपको लगता है कि आपको उपयोगकर्ता एजेंट स्टाइल शीट में कोई समस्या है, तो आपको वास्तव में आपके मार्कअप, या आपकी स्टाइल शीट, या दोनों (जिसके बारे में आपने कुछ भी नहीं लिखा है) के साथ समस्या है।

Comments

जब आप उन्हें ओवरराइड नहीं करते हैं तो @givanse, नहीं, आप उपयोगकर्ता एजेंट शैली पत्रक प्रभाव देखते हैं और आपका नमूना मार्कअप कोई अपवाद नहीं है। इसे केवल पाठ सामग्री के साथ liदो ulतत्वों वाले एक तत्व के रूप में पार्स किया जाएगा ; वे उपयोगकर्ता एजेंट स्टाइल शीट द्वारा स्टाइल किए जाते हैं, लेकिन इस स्टाइल को ओवरराइड किया जा सकता है। (क्या मार्कअप अमान्य है, संदर्भ और HTML संस्करण पर निर्भर करता है; लेकिन यह स्टाइल को प्रभावित नहीं करता है।)

— जुका के। कोर्पेला

@givanse, यह समस्या "उपयोगकर्ता शैली पत्रक क्या है" प्रश्न के लिए प्रासंगिक नहीं है। यदि आपको लगता है कि समस्या महत्वपूर्ण है, तो इसे पर्याप्त विवरण के साथ एक नए प्रश्न के रूप में पोस्ट करें। लेकिन आपके jsfiddle में बुलेट liतत्व के लिए एक सरल बुलेट है , और आपकी स्टाइल शीट इसे ओवरराइड नहीं करती है।

— जुक्का के। कोर्पेला

Answer 4

पहली पंक्ति में उचित सिद्धांत द्वारा HTML5 के रूप में दस्तावेज़ को चिह्नित करना, मेरे मुद्दे को हल किया।

<!DOCTYPE html>
<html>...

Comments

क्या आप बता सकते हैं कि यह वास्तव में कैसे काम करने वाला है? HTML 5 अपरिभाषित शैलियों से कैसे संबंधित है? मैं पुष्टि करता हूँ लेकिन क्या आपके पास इसकी पुष्टि करने के लिए कोई तैयार है?

— कपिल शर्मा

Answer 5

एक उपयोगकर्ता एजेंट शैली शीट एक "डिफ़ॉल्ट शैली शीट" है जो ब्राउज़र द्वारा प्रदान की जाती है (जैसे, क्रोम, फ़ायरफ़ॉक्स, एज, आदि) पृष्ठ को इस तरह से प्रस्तुत करने के लिए कि वह "सामान्य प्रस्तुति अपेक्षाओं को संतुष्ट करता है।" उदाहरण के लिए, एक डिफ़ॉल्ट शैली शीट फ़ॉन्ट आकार, सीमाओं और तत्वों के बीच रिक्ति जैसी चीजों के लिए आधार शैली प्रदान करेगी। ब्राउज़रों के बीच विसंगतियों से निपटने के लिए एक रीसेट स्टाइल शीट को नियुक्त करना आम है।

विनिर्देशन से ...

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

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

Answer 6

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

• गेको (फ़ायरफ़ॉक्स): https://dxr.mozilla.org/mozilla-central/source/layout/style/res/html.css

• क्रोमियम (क्रोम): https://chromium.googlesource.com/chromium/src/third_party/+/master/blink/renderer/core/html/resources/html.css

• WebKit (Safari): https://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css

व्यक्तिगत राय: उनके साथ मत लड़ो। उनके पास अच्छे डिफ़ॉल्ट मान हैं, उदाहरण के लिए, आरटीएल / बीड़ी मामलों में और आजकल सुसंगत हैं। रीसेट करें जो आप अप्रासंगिक देखते हैं, उन सभी को एक बार में नहीं।

Answer 7

उन मानों को परिभाषित करें जिन्हें आप अपने सीएसएस सामग्री में क्रोम के उपयोगकर्ता एजेंट शैली से उपयोग नहीं करना चाहते हैं।

Answer 8

कुछ ब्राउज़र .css फ़ाइलों को पढ़ने के लिए अपने तरीके का उपयोग करते हैं। तो इसे हरा करने का सही तरीका: यदि आप कमांड लाइन को सीधे .html स्रोत कोड में टाइप करते हैं, तो यह .css फ़ाइल को धड़कता है, उस तरह से, आपने ब्राउज़र को सीधे बताया कि क्या करना है और ब्राउज़र पढ़ने की स्थिति में नहीं है .css फ़ाइल से कमांड। याद रखें कि .html फ़ाइल में कमांड कमांड .css में कमांड से अधिक मजबूत है।

Answer 9

मेरे पास एक ही समस्या थी जैसे मेरे <div> के ब्राउज़र द्वारा मार्जिन सेट किया गया था। यह काफी कष्टप्रद था, लेकिन फिर मुझे पता चला कि अधिकांश लोगों ने कहा, यह एक मार्कअप त्रुटि है।

मैंने वापस जाकर अपना <head> अनुभाग चेक किया और मेरा CSS लिंक नीचे की तरह था:

<link rel="stylesheet" href="ex.css">

मैंने इसमें शामिल typeकिया और इसे नीचे की तरह बनाया:

<link rel="stylesheet" type="text/css" href="ex.css">

मेरी समस्या हल हो गई।

Answer 10

यदि कोई HTML फ़ाइल एक निर्दिष्ट नहीं करता है, तो प्रत्येक ब्राउज़र एक डिफ़ॉल्ट स्टाइलशीट प्रदान करता है, जिसे उपयोगकर्ता एजेंट स्टाइलशीट कहा जाता है। आपके द्वारा निर्दिष्ट शैलियाँ डिफ़ॉल्ट को ओवरराइड करती हैं।

क्योंकि आपने तालिका तत्व के बॉक्स के लिए मान निर्दिष्ट नहीं किए हैं, इसलिए डिफ़ॉल्ट शैलियों को लागू किया गया है।

Answer 11

मैं यहां जो कुछ भी पढ़ रहा हूं, उसके आधार पर मैं @BenM से प्रतिक्रिया का विस्तार करना चाहता था गुस्सा Aderinokun से। क्योंकि उपयोगकर्ता-एजेंट स्टाइलशीट उपयोगी डिफ़ॉल्ट स्टाइल प्रदान करता है, इसे ओवरराइड करने से पहले दो बार सोचें।

मेरे पास एक डंब एरर था जहां क्रोम में एक बटन एलिमेंट सही नहीं लगता था। मैंने इसे आंशिक रूप से स्टाइल किया था क्योंकि मैं नहीं चाहता था कि यह एक पारंपरिक बटन की तरह दिखे। हालाँकि, मैंने स्टाइल तत्वों जैसे बॉर्डर, बॉर्डर-कलर इत्यादि को छोड़ दिया, इसलिए क्रोम उन हिस्सों की आपूर्ति करने के लिए कदम बढ़ा रहा था जो यह सोचते थे कि मैं गायब था।

जैसे ही मैंने शैलियों को जोड़ा, समस्या दूर हो गई border: none , ।

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

Comments

क्या यह उत्तर के बजाय टिप्पणी नहीं होनी चाहिए?

— पीटर मोर्टेंसन

@PeterMortensen हाँ, लेकिन मैं टिप्पणियों को नहीं छोड़ सकता - पर्याप्त प्रतिष्ठा नहीं।

— ब्रेंट मिलर

Answer 12

मेरे पास एक उपाय है। इसे देखो:

त्रुटि

<link href="assets/css/bootstrap.min.css" rel="text/css" type="stylesheet">

सही बात

<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">

Comments

कृपया यह समझाने के लिए संपादित करें कि यह कैसे काम करता है और यह क्यों मदद करता है।

— युनानोश

Answer 13

अपनी CSS फ़ाइल में निम्न कोड डालें:

table {
    font-size: inherit;
}

Comments

यह वास्तव में इस पोस्ट में कुछ भी नया नहीं जोड़ता है। पहले से ही एक स्वीकृत उत्तर है, साथ ही 5 अन्य उत्तर भी हैं, इसलिए कृपया देर से उत्तर पोस्ट न करें।

— कास्पर ली