छोटी खिड़कियों में हैबर - अब 420 पिक्सल से

हैबर के रबर डिजाइन और हैबर प्रेटिफ़ायर / स्पंब स्टाइलर पर काम पूरा होने के लिए धन्यवाद , जिसे पृष्ठों की कॉम्पैक्टनेस और पठनीयता प्राप्त करने के लिए आवश्यक है, साइट ने पूरी तरह से संकीर्ण खिड़कियों में काम करने की क्षमता प्राप्त की है - 420 मिलियन वाइड (आपको किसी गैर- IE6-7 ब्राउज़र और प्लगइन की आवश्यकता है) स्टाइलिश स्टाइलिस्ट या GreaceMonkey प्लगइन, या Safari / Win के लिए NinjaKit, या ओपेरा, IE8 या Safari में कस्टम स्टाइल सेट करना। परिणाम स्क्रीनकेस्ट (Youtube) पर दिखाता है कि आप Habr का उपयोग ऐसी छोटी खिड़कियों में कर सकते हैं।



कोड के साथ परिचित, स्क्रीनशॉट के एक जोड़े और स्टाइलिश या GreaceMonkey में स्थापना।



संकीर्ण खिड़की में पूर्ण कार्य प्रदर्शित करने का सबसे अच्छा तरीका साइट पर वीडियो के माध्यम से फिल्माया गया है।

---

खिड़की का आकार लगभग 440-480 पिक्सल है। इसका कोई विशेष व्यावहारिक मूल्य नहीं है: समान स्क्रीन चौड़ाई वाले स्मार्टफोन या टैबलेट नहीं हैं। लेकिन इस चौड़ाई में सुधार ऐसे मामलों में उपयोगी होगा:



1. संकीर्ण स्क्रीन मोड के लिए प्राप्त साइट डिस्प्ले 640-1024 पिक्सल की व्यापक खिड़कियों के लिए उपयोगी है, और यह नेटबुक के लिए पहले से ही काफी व्यावहारिक है।

2. एक मोड संभव है जब साइट नेटबुक स्क्रीन के आधे भाग पर दिखती है, और उदाहरण के लिए, दूसरी छमाही पर मेल करें।

3. एक पारंपरिक मॉनिटर पर एक बहुत ही संकीर्ण ब्राउज़र विंडो का मोड स्क्रीन क्षेत्र के तर्कसंगत उपयोग के लिए संभव है।

प्रिटिफायर क्या है?

यह habr.ru वेबसाइट शैलियों का परिशोधन है, जो अल्मालेक्सा द्वारा एक साल से अधिक समय पहले शुरू हुआ था: हैबरहैब - प्रेटीफ़ायर (लिंक अल्मालेक्सा से है; उनकी शैलियाँ केवल फ़ायरफ़ॉक्स के तहत काम करती हैं और यहाँ वर्णित स्टाइलर का प्रोटोटाइप हैं)। नाम पर जोर दिया गया है कि संशोधन सुखद होना चाहिए (उपयोग में पहले से बताएं - Eng। "Preen")। लेखक ने तर्क दिया कि पहले लक्ष्य भी प्रदर्शन की कॉम्पैक्टनेस था, लेकिन फिर, जैसा कि आप देख सकते हैं, सूचना के घनत्व और इसकी पठनीयता के बीच एक उचित समझौता चुना गया था।

संशोधन इतिहास

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



अंत में, जब कोड में क्रॉस-ब्राउज़र संगतता प्राप्त की जाती है, तो शैलियों को 1 फ़ाइल में संयोजित करने के लिए, मुझे सीएसएस-हैक का उपयोग करना पड़ा। लेकिन अब आप केवल ब्राउज़र के प्रकार के बारे में सोचे बिना उपयोगकर्ता-शैली स्थापित कर सकते हैं।



शैलियों को बेहतर ढंग से परिष्कृत करने के बारे में "खोजों" नियमित रूप से होती हैं, हर 1-3 दिनों में एक बार। उदाहरण के लिए, स्केलेबल चित्र उनकी टिप्पणियों की सूची में बनाए गए थे, क्योंकि अजनबियों की सूची में स्केलेबिलिटी पहले ही हबर से थी, और एलेक्सेलेक्सा से लेखों में। निम्नलिखित सुविधाओं की एक सूची है जो लेखन के समय मौजूद है।



अपनी आवश्यकताओं के लिए एक उबाऊ स्टाइलिस्ट बनाने के लिए इतना दिलचस्प नहीं है कि इसके आधार पर कुछ असामान्य बनाने के लिए, जो दिलचस्प होगा, यदि आवेदन द्वारा नहीं, तो विचार से। और अब, साइट की सुपरकंपैटिनेस (420 पिक्सल या उससे अधिक की आंतरिक चौड़ाई के साथ विंडो में काम करने की क्षमता), जो कि अर्जित सौंदर्य को खोए बिना सक्षम हो गई (मुझे उम्मीद है) गुण हैं, यही कारण है कि जो लोग इसे स्थापित नहीं करेंगे, वे भी इसे देखना चाहते हैं।

- तस्वीर 1 (या देखने के लिए नहीं खुलने पर क्लिक करें) ।



वीडियो प्रस्तुति में साइट के व्यवहार को देखकर शुरू करना सबसे सुविधाजनक है (नीचे)।

साइट पृष्ठों का लेआउट।

हमने ऐसी कितनी साइटें देखी हैं जहाँ मानक मेनू और नेविगेशन स्क्रीन के 20 पिक्सेल ऊँचाई पर रहते हैं? हम इस तरह के एक कॉम्पैक्ट मेनू के साथ स्क्रीनकास्ट के काम पर दिखाते हैं। बहुत छोटी खिड़कियों के लिए, स्टाइलिश नेटबुक एडऑन को जोड़ता है, जो सही मेनू को नीचे ले जाता है और खाली फ़ील्ड को और अधिक संकुचित करता है, भारी नेस्टेड टिप्पणियों के इंडेंटेशन को प्रतिबंधित करता है।



वीडियो प्रस्तुति - विभिन्न ब्राउज़र में Prettifier / spmbt कैसे दिखता है (यह इस पृष्ठ से नहीं देखना बेहतर है, क्योंकि यहां स्केल कम हो गया है, लेकिन तुरंत Youtube पृष्ठ पर है )। इंटरफ़ेस बहुत संकीर्ण खिड़कियों में एक नियमित वीडियो फ्रेम के आकार और छोटे में दिखाया गया है। फ़ायरफ़ॉक्स - लगभग 5 मिनट, फिर थोड़ा सा आराम (स्कोरिंग के लिए - ध्यान से: कुकिन!)।



किसके पास कोई इच्छा या क्षमता नहीं है कि वह 8 मिनट की एक्सट्रावग्ना स्क्रेंकास्ट देख सके - कुछ तस्वीरें



ब्राउज़र विंडो को 420 पिक्सल्स की चौड़ाई पर सेट करें, Prettifier / spmbt stylizer स्थापित करें और इसे-नेटवर्थ एडऑन में जोड़ें । हम मुख्य पृष्ठ habr.ru पर जाएंगे। हम क्या देखते हैं? हाँ, अब यह मुख्य पृष्ठ है।

अंजीर। 2 या क्लिक करें

साइट और उपयोगकर्ता मेनू कहां है? वे ऊपरी पारदर्शी कोनों में ग्रे पारभासी बटन के रूप में छिपाते हैं। बटन पर माउस को स्थानांतरित करना आवश्यक है - एक मेनू प्रकट होता है।

अंजीर। 3 या क्लिक करें

इस तरह के एक छोटे से नेविगेशन आकार ने बटन को लगातार अपडेट करने के अधिकार पर हैंबर बटन की शैली में दिखाई दिया। नए मेनू आइटम और अन्य हब्रोक्स्टेंशन से सबमेनस के साथ उपयोगकर्ता मेनू काफी सह-अस्तित्व (यदि कॉन्फ़िगर किया गया है), उदाहरण के लिए, crea7or से एक लेख फ़िल्टर।

अवसर (विशेषताएं)।

*) साइट नेविगेशन 20 पिक्सेल ऊँचाई पर ले जाता है, हमेशा खिड़की के कोनों पर स्क्रीन पर।

*) कॉम्पैक्ट पेज टाइटल।

*) दिनांक और लेखक - लेख की शुरुआत में (लेखक तल पर चोट नहीं करेगा, लेकिन शैलियों में कोई लेना देना नहीं है; हम 2 बुराइयों को कम लेते हैं)।

*) सही मेनू में नेविगेशन पथ प्रदर्शित करने का लचीलापन: यदि चौड़ाई अनुमति देती है - 1 पंक्ति।

*) खिड़की की चौड़ाई (हैबर और एलेक्सेलेक्सा की विरासत) में आकृतियों की स्केलिंग।

*) फ़ॉन्ट आकार - 9 px से कम नहीं (गैर-धुंधला और पठनीयता के लिए)।

*) महत्वपूर्ण संकेतकों के लिए बड़े फोंट।

*) AlmAlexa (बटन, स्विच छवियों, खोज क्षेत्र, पाद लेख, टिप्पणी मूल्यांकन तीर) से कई डिजाइन संशोधन।

*) प्राधिकरण के साथ या उसके बिना काम करते हैं।

*) क्रॉस-ब्राउज़र संगतता (केवल IE6-7 को अनदेखा किया जाता है, बाकी लगभग 95% उपयोगकर्ता शामिल हैं)।



(दाएं कॉलम के बिना मोड)

*) स्टाइलिश में एक अलग शैली द्वारा बनाए गए पृष्ठ ( नेटबुक एडऑन ) के नीचे सही कॉलम का अनुवाद करने की विधा है, जो मुख्य प्रेटिफ़ायर / स्पंब स्टाइल के बिना भी काम कर सकती है।

*) नेटबुक एडऑन मोड में खाली जगहों और खेतों का संकलन, 420 पिक्सल की आंतरिक खिड़की की चौड़ाई के साथ साइट का सही प्रदर्शन ।।

*) नेटबुक एडऑन मोड में टिप्पणी इंडेंट (स्तर 10 के बाद) की वृद्धि को सीमित करें। वृक्षों की शाखाओं के विभाजक (मोटी क्षैतिज रेखाएं 10 से अधिक गहरी) बिना खरोज के उन्मुखीकरण के लिए।

*) लेख और टिप्पणियों ("स्लीपर्स") के विपरीत और स्वैच्छिक विभाजक।

*) फॉन्ट साइज, ड्रॉइंग और प्री टैग प्रतिबंध माइक्रोब्र में।



(टिप्पणी क्षेत्र)

*) कॉम्पैक्ट टिप्पणियाँ।

*) लेखक, तिथि, अवतार, निशानेबाज, सितारों का पैलर एक सफेद अंतराल बनाता है और पढ़ने से विचलित नहीं करता है। उपरोक्त सभी के विपरीत - माउस होवर पर।

*) यूएफओ के बारे में विचारशील बयान, पढ़ने से विचलित न होकर एक बहुत ही अगोचर कम ग्रे पट्टी में बदल जाते हैं।

*) पेड़ों की शाखा विभाजक टिप्पणियों में: यदि अगली टिप्पणी पिछले एक का जवाब नहीं है, तो हम एक पतली पट्टी देखते हैं - एक क्षैतिज विभाजक।

*) टिप्पणी पेड़ की ऊर्ध्वाधर शाखाएं: यदि नीचे एक और चर्चा शाखा है, तो बाईं ओर दिखाई देने वाली ऊर्ध्वाधर पट्टी दिखाई देती है।

संगतता।

स्टाइलर अवांछित लेखों के हाल ही में जारी किए गए crea7or फिल्टर के साथ संगत है। फ़िल्टर सेटिंग्स व्यक्तिगत पैनल में सही ढंग से प्रदर्शित होती हैं, लेखकों और ब्लॉगों के बगल में फ़िल्टर में शामिल किए जाने वाले बटन हैं।



एक्सटेंशन हैब्रतुलज़ और कर्मा दर्शक (स्पंब द्वारा संपादित) के संयोजन में उपयोग किया जाता है।



सभी आधुनिक ब्राउज़रों में काम करता है; यह IE8 में जांचा और ट्यून किया गया था (इसमें गलत डिस्प्ले के साथ कुछ है, सीएसएस 3 से कोई फ़िलालेट और बाकी सब कुछ नहीं है, लेकिन आप काम कर सकते हैं)।



शैलियों में साइट डेवलपर्स के विभिन्न संपादन समय के साथ त्रुटियों को प्रदर्शित कर सकते हैं, जो यदि संभव हो तो पता लगाया जाएगा, यदि संभव हो तो इसे ठीक किया जाएगा।

समझौता।

पृष्ठों की संरचना में ऐसे (जहां उनके बिना) ऐसे "दोष" हैं, जिसमें केवल शैलियों का उपयोग करके वांछित को पूरी तरह से पूरा करना संभव नहीं है। परिणाम प्राप्त करने के लिए, लेकिन स्क्रिप्ट में शैलियों के दायरे से परे नहीं, हम समझौता करते हैं।



1. आपको समझौता करने का मुख्य कारण यह है कि स्थानांतरित निरपेक्ष ब्लॉक मुख्य दस्तावेज़ प्रवाह से बाहर निकल जाते हैं। उनके लिए मार्कअप अब रबर पेज परिवर्तन के लिए जगह नहीं बनाता है; अधिकांश व्यावहारिक मामलों के लिए एक जगह प्रदान की जानी चाहिए।



1.a. मैं लेख के शीर्षक में एक तारीख, लेखक और मूल चाहता था। प्राप्ति की विधि तिथि, लेखक, मूल के बिल्कुल तैनात क्षेत्र हैं। बहुत संकीर्ण खिड़कियों के साथ ताकि क्षेत्र अन्य ग्रंथों में न चलें, हम उनके शुरुआती बिंदुओं को पृष्ठ के बाईं ओर दबाने का प्रयास करते हैं। इसलिए, हम लेखों की शुरुआत में 2-3 क्षेत्रों के कुछ ढेर देखते हैं।



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



1.c. मूल्यांकन फ़ील्ड को हमेशा 1 पंक्ति में नहीं रखा जाता है और दूसरी पंक्ति की शुरुआत में स्थानांतरित किया जाता है। ताकि उन्हें "स्टेप वाइज" फेंक दिया जाए, ऊपरी पंक्ति के प्रोट्रूशंस से चिपके हुए, ऐसे प्रोट्रूशियन्स को जानबूझकर स्थापित किया जाता है।



2. खाली पैनल को हटाने के लिए सही पैनल के साथ साइट का ऑपरेटिंग मोड खाली फ़ील्ड को बचाने के उपायों के साथ है: वे चर आकार के ब्लॉकों के टकराव के मामलों को कम करने के लिए संकुचित हैं।



3. (कोड।) कुछ शैलियों को मूल के लेखक से विरासत में प्राप्त करने की आवश्यकता के गहन विश्लेषण के बिना विरासत में मिला है। आवधिक कोड समीक्षा धीरे-धीरे शैलियों की शेष ज्यादतियों को समाप्त करती है (और नए बनाए जाते हैं)।



3. ए (कोड।) शैलियों में सामान्य से कुछ शैलियों को बाहर करने की विधि का उपयोग करने के बजाय चयनकर्ताओं की बहुत लंबी गणना है। यह इस तथ्य के कारण है कि ऐसे मामलों में साइट में बच्चे की कक्षाओं की सामान्य शैली का पूर्ण कवरेज नहीं था। (उदाहरण के लिए, बॉडी टैग में पृष्ठ प्रकार)



4. यदि कंपनी के ब्लॉग का नाम बहुत लंबा है, तो यह 1 लाइन पर फिट नहीं होता है। नाम के अंत को छिपाने के लिए एक "पॉकेट" है, लेकिन अगर यह 2 लाइन पर पड़ता है, तो इसे बाद की हेडिंग के साथ मिलाया जाता है।

अनारक्षित कीड़े।

1. यदि आप फ़ायरफ़ॉक्स सेटिंग "सेटिंग्स ... सामग्री - डिफ़ॉल्ट फ़ॉन्ट: वैकल्पिक ... का उपयोग करते हैं ... सबसे छोटा फ़ॉन्ट आकार है ('नहीं')", तो कुछ स्थानों पर न्यूनतम फोंट (टिप्पणी की तारीख और फ्लोट के साथ अन्य टुकड़े: बाएं) बढ़ना शुरू हो जाता है और "तैरना" नीचे। यह एक ब्राउज़र बग है; शैली सेटिंग्स को दूर नहीं किया जा सका। न्यूनतम फ़ॉन्ट की विभिन्न सेटिंग्स के लिए, ग्रंथों के लिए अलग-अलग पेडिंग-टॉप की आवश्यकता होती है, कोई पंक्ति-ऊंचाई और ऊर्ध्वाधर-संरेखित मदद नहीं।



2. यह सोचा गया था कि लेख के तल पर लेखक को भी कैसे रखा जाए - माउस को मँडराकर, लेकिन वेबकिट में यह कलाकृतियों के साथ काम करता है - माउस को ले जाने पर रेटिंग फ़ील्ड की अवशिष्ट चौड़ाई होती है, माउस से खराब-गुणवत्ता को फिर से जोड़ना।



3. (बग्स ऑफ हबर।) मेल के पहले अक्षर में हमेशा मेरी-उत्तर कक्षा होती है, इसलिए किसी शैली के साथ यह संकेत करना असंभव है कि वह अपनी है या नहीं।

3 ए। पृष्ठ प्रकारों को कवर करने वाली कक्षाएं नहीं। उदाहरण के लिए, शरीर में कोई क्यूए कक्षाएं, हाइब्रलेंट्स, पसंदीदा, एक सूची और एक लेख के बीच वर्ग अंतर और कई अन्य कक्षाएं नहीं हैं, जो कोड को काफी कम कर देती हैं और बग को ठीक कर देती हैं।



4. एफएफ में, इनपुट बटन की मानक शैली नहीं बदलती है - जैसे कि कहीं इसे उच्च प्राथमिकता नियम (जहां?) द्वारा प्लगइन्स में "बाधित" किया गया था।



5. सफारी 5.02 / विन पर, स्टाइलर को निंजाकिट -0.8 प्लगइन के माध्यम से लॉन्च किया गया है। इसमें, ओनलोड के समय कोड को ट्रिगर किया जाता है, इसलिए पहले 2 सेकंड में हैबर पेज सामान्य शैलियों के साथ दिखाई देता है। आप शैलियों को ब्राउज़र शैली में रख सकते हैं, फिर यह तुरंत काम करेगा। लेकिन यह स्पष्ट नहीं है कि केवल इस साइट के लिए सफारी में शैलियों का निर्माण कैसे किया जाता है (@ -moz- दस्तावेज़ डोमेन () का एनालॉग)।



6. क्रोम में, HabraTopicFilter crea7or प्लग-इन शीर्षक में "फ़िल्टर" शब्द पंक्ति से बाहर क्रॉल करता है, लेकिन कार्यात्मक रूप से।



7. "हूज़" टैब आम तौर पर केवल चौड़ी खिड़कियों के साथ दिखता है (इसकी स्थिति JS से संबंधित है, यह अनम्य है, इसलिए इसे JS के बिना स्पर्श नहीं करना बेहतर है)।



8. स्टाइलिस्ट के लिए कोई विशेष बगट्रैकर नहीं है। इसलिए, जो लोग कहीं न कहीं सुधार करना चाहते हैं, बग को इंगित करते हुए - हम लैन के माध्यम से संपर्क कर सकते हैं।



9. क्रोम 6.0.472.63 (534.3) और उच्चतर और सफारी 5.02 (533.18.5) के बीच अंतर करने के लिए कोई सीएसएस हैक नहीं है, लेकिन उनमें एक तत्व अलग दिखता है। Chrome में 24 घंटे की सूची को सर्वश्रेष्ठ बनाने के लिए, आपको लाइन को खोजने और हटाने की आवश्यकता है: ".live.dailybest dl.air-comment> dd {मार्जिन: 0! महत्वपूर्ण;}"; क्रोम में शैलियों की सूची से इंस्टॉल किए गए एक्सटेंशन को संपादित करने से। स्टाइलिश पर।



9a। क्रोम 6 और 7 में, लेआउट भी थोड़ा अलग है, मेनू में (शब्द "सेटिंग्स", "फ़िल्टर") आपको समझौता करना होगा - शब्दों को एक से अधिक पंक्ति में डालें (केवल वेबकिट के लिए)।



10. IE8 क्वालीफायर "[विशेषता = मूल्य]" को अलग नहीं करता है, इसलिए यह मेनू में एक भी शब्द "दर्ज" नहीं दिखा सकता है, जैसा कि अन्य सभी ब्राउज़र दिखाते हैं। आपको यह अनुमान लगाना होगा कि आपको लॉग इन करने के लिए माउस को खाली दाएं कोने में ले जाना होगा।

स्टाइलिस्ट स्थापना के तरीके

एक अनुभवी उपयोगकर्ता के लिए स्पष्ट कार्यवाहियों का वर्णन किया गया है, लेकिन उन्हें सभी के लिए समझने योग्य बनाने के लिए, प्रत्येक ब्राउज़र के सभी ऑपरेशन विस्तृत हैं।



*) फ़ायरफ़ॉक्स । स्थापित स्टाइलिश या GreaceMonkey प्लगइन्स होने के बाद, इंस्टॉलेशन पेज पर जाएं और मौजूदा प्लगइन (अधिमानतः स्टाइलिश) के आधार पर दो में से एक बटन पर क्लिक करें। या स्टाइलिश में एक नई शैली बनाएं और उसमें सीएसएस फ़ाइल के पाठ को कॉपी करें। (एफएफ v.3.6.10 में परीक्षण किया गया)



*) Google Chrome (6.0.472.63, 7.0.517.41 में परीक्षण किया गया)। हम स्टाइलिश प्लगइन स्थापित करते हैं, स्टाइल इंस्टॉलेशन पृष्ठ पर जाते हैं , फिर ब्राउज़र के निर्देशों का पालन करते हैं। "24 घंटे में सर्वश्रेष्ठ" सूची की उपस्थिति में सुधार करने के लिए (बग # 9 देखें), हम मानक प्लगइन टूल का उपयोग करके शैलियों के पाठ को संपादित करते हैं स्टाइलिश: क्रोम: // एक्सटेंशन / - स्टाइलिश - सेटिंग्स - हैबर-प्रीटीफायर: संपादित करें, फिर इनपुट फ़ील्ड से खोजें और निकालें " कोड "लाइन" .live.dailybest dl.air-comment> dd {मार्जिन: 0! महत्वपूर्ण;} ", फिर" सहेजें "बटन।



अगले 3 ब्राउज़रों के लिए, संपूर्ण फ़ाइल (!) का उपयोग नहीं किया गया है, लेकिन केवल इसका मुख्य भाग, लाइनों के बीच "@ -मोज़-दस्तावेज़ डोमेन (" habrahabr.ru ") {" (शुरुआत से लगभग 9 वां) और "}" (लगभग) इन पंक्तियों के बिना 8 वें छोर से) स्वयं।



*) ओपेरा (10.60, 10.51, 10.10 पर जांचा गया)। "उपकरण" - सामान्य सेटिंग्स - उन्नत - सामग्री - साइटों के लिए सेटिंग्स - जोड़ें - मूल - साइट: habrahabr.ru - दृश्य - मेरी शैली पत्रक: शैली पत्रक के लिए पथ निर्दिष्ट करें जिसमें सभी सामग्री नहीं है, लेकिन "@ -मोज़" के बीच -document डोमेन ("habrahabr.ru") {"और"} ", समापन कोष्ठक अंत से लगभग 8 वीं पंक्ति पर है)। "ओके", "क्लोज़", "ओके"। इस पृष्ठ को पुनः लोड करें habr.ru. ओपेरा में मेनू के माध्यम से कैसे जाना जाता है, आंकड़ों में दिखाया गया है।



*) सफारी (5.02 (533.18.5) में परीक्षण किया गया)। सेटिंग्स ... - परिवर्धन - टैब.स्टाइल्स - अन्य ... - (सहेजी गई शैलियों के साथ एक फ़ाइल का चयन करें; "सेटिंग्स" विंडो बंद करें)। इस पृष्ठ को पुनः लोड करें habr.ru.



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



निंजाकिट प्लगइन के माध्यम से किसी अन्य साइट के लिए शैलियों को दूसरे तरीके से सेट करना संभव है। लेकिन इसकी एक खामी है: प्रत्येक पृष्ठ को लोड करने के बाद शैलियों 1-2 सेकंड काम करती हैं, और इससे पहले कि आप प्राकृतिक, अनियंत्रित वेबसाइट शैलियों को देख सकते हैं, जो निश्चित रूप से असुविधाजनक है। GreaceMonkey के माध्यम से फ़ायरफ़ॉक्स में एक समान स्थापना विधि में यह नहीं देखा जाता है।



*) IE8 । मोड को "IE8" पर सेट करें (पिछले संस्करण के साथ "संगतता मोड" नहीं)। "टूल" - इंटर्नेट विकल्प - सामान्य - एक्सेसिबिलिटी (टैब पर अंतिम बटन) - उपयोगकर्ता शैली शीट: (सभी सामग्री नहीं, बल्कि "@ -मोज़-डॉक्यूमेंट डोमेन" ("habrahabr.ru) के बीच स्टाइलशीट के लिए पथ निर्दिष्ट करें) {{और "}", समापन ब्रैकेट अंत से लगभग 8 वीं पंक्ति है)। "ओके", "लागू करें" (या "ओके", "ओके")।



इस तरह से परिभाषित शैलियों की अक्षमता के बारे में एक नोट सफारी के लिए समान है।



IE8 सही कॉलम में सीमा घटता, ग्रेडिएंट, छाया, इनलाइन-ब्लॉक शैलियों को प्रदर्शित नहीं करेगा, स्थिति तत्वों के कुछ तरीके (उदाहरण के लिए, लेख की तारीख और लेखक - एक पारंपरिक स्थान में)। सामान्य तौर पर, IE में स्टाइलिस्ट का उपयोग करना अन्य ब्राउज़रों की तुलना में कम आरामदायक नहीं है।

सही कॉलम के बिना काम करें

सही कॉलम को नीचे ले जाने के लिए, और मुख्य पाठ के लिए अलग "सीलिंग बोनस" ("फीचर" अनुभाग में ऊपर सूचीबद्ध) प्राप्त करने के लिए, 2 तरीके हैं:

1) दूसरी शैली (हेब नेटबुक एडऑन) को स्टाइलिश में रखें और दोनों को कनेक्ट करें। विभिन्न कनेक्शन संयोजनों की तुलना करना और उन्हें जल्दी से बदलना सुविधाजनक है। कभी-कभी शैलियों को चालू / बंद करने से छोटी मार्कअप त्रुटियां होती हैं, फिर पृष्ठ को फिर से लोड करने की आवश्यकता होती है। बचने के लिए - Addon दूसरे को चालू करने के लिए, और पहले बंद करें।

2) मुख्य स्टाइलशीट में केवल 1 स्पेस कैरेक्टर को हटाएं (फॉर्म की लाइन में "/ * नेटबुक के लिए (साइडबार के नीचे) * /" - पेनॉल्टी कैरेक्टर)। यह कमेंट किए गए टेक्स्ट के 3 KB को खोलेगा, जो एकल ऐड-ऑन की सामग्री बनाता है। (यह मानक स्थापना के दौरान काम नहीं करेगा, क्योंकि यह टिप्पणियों को हटा देता है। टिप्पणियों के बिना कोड के बजाय, आपको सबसे पहले हैबर के लिए स्टाइलशीट के लिए स्रोत कोड फ़ाइल रखना होगा।)



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



इस तथ्य के लिए परियोजना के लेखकों के लिए धन्यवाद कि शैली प्रणाली, पृष्ठ वास्तुकला आपको अंतिम प्रस्तुति को इतनी लचीले ढंग से बदलने की अनुमति देता है।



यदि आप शब्द "ब्राउज़र थीम" के लिए खोज इंजन में देखते हैं, तो, विचित्र रूप से पर्याप्त है, 80% का अर्थ है किसी साइट की पृष्ठ शैलियों का डिज़ाइन (और ब्राउज़र की त्वचा नहीं)। और इस विषय पर केवल Vkontakte साइट का उल्लेख किया गया है। विशेष रूप से IE ब्राउज़रों के लिए। यह कार्य साइट संदर्भों की एकरूपता को कम करने में मदद करता है, जिससे क्रॉस-ब्राउज़र समाधान में मदद करनी चाहिए।