सीएसएस के साथ सीएसएस स्थानीयकरण

लोगों का सीएसएस के प्रति एक अलग दृष्टिकोण है। कोई व्यक्ति बड़बड़ाता है कि पहले टेबल ग्रीनर थे, कोई उत्तेजित हो गया था, वे कहते हैं, मुझे अपनी टेबल दें, इसलिए मैं उन्हें हरा दूंगा। व्यक्तिगत रूप से, मेरे पास लंबे समय से सीएसएस फाइलें हैं जो किसी वेब पेज की उपस्थिति के लिए कुछ प्रकार के कॉन्फ़िगरेशन के रूप में हैं। वास्तव में, यह है। एक अच्छे टाइपसेटर के लिए, HTML का उपयोग डॉक्यूमेंट की संरचना बनाने के लिए किया जाता है, जो तब उपस्थिति प्रदर्शित करने के लिए CSS का उपयोग करके अनुकूलन योग्य होता है।

आमतौर पर, बाहरी प्रदर्शन सभी प्रकार की सुंदरियों को संदर्भित करता है जैसे कि चित्र, गोल कोने, ग्रेडिएंट और अन्य वेब द्वंद्व। हालाँकि, इंटरनेट पर सूचना प्रसारित करने का मुख्य साधन अभी भी उनकी महिमा का पाठ है। पाठ का उपयोग हर जगह किया जाता है: साइट नेविगेशन में, और बुनियादी जानकारी में।

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

विचार सरल है। सभी सीएसएस कोडर्स एक संपत्ति जैसे कि सामग्री के बारे में जानते हैं ;; जो छद्म तत्वों से पहले और बाद में: पर लागू होता है। सबसे अधिक बार, "जादू" संयोजन का उपयोग करते हुए: के बाद और सामग्री:; अस्थायी ब्लॉकों के लिए स्पष्ट लागू करें। लेकिन आम तौर पर सामग्री में: आप बिल्कुल कोई भी पाठ लिख सकते हैं। टैग के बिना, सच है, लेकिन यह एक उचित सीमा है।

इसका उपयोग कैसे किया जा सकता है? आपको दो सीएसएस फाइलें बनाने की जरूरत है। मान लीजिए कि "en.css" और "ru.css" हैं। ब्लॉक की मुख्य शैलियों (रंग और अन्य पूर्वसर्ग) को "main.css" फ़ाइल में परिभाषित किया जाना चाहिए।

<!-- HTML- --> <ul class="b-menu"> <li class="b-menu__item b-menu__item_name_main"><span class="b-menu__curr"></span></li> <li class="b-menu__item b-menu__item_name_portfolio"><a class="b-menu__link" href=""></a></li> <li class="b-menu__item b-menu__item_name_team"><a class="b-menu__link" href=""></a></li> <li class="b-menu__item b-menu__item_name_contacts"><a class="b-menu__link" href=""></a></li> </ul> 

 /*   «main.css» *//**/ .b-menu:after { content: ''; display: block; clear: both; } .b-menu__item { float: left; } 

 /*   «en.css» *//**/ .b-menu__item_name_main .b-menu__curr:after, .b-menu__item_name_main .b-menu__link:after { content: 'Main Page'; } .b-menu__item_name_portfolio .b-menu__curr:after, .b-menu__item_name_portfolio .b-menu__link:after { content: 'Portfolio'; } .b-menu__item_name_team .b-menu__curr:after, .b-menu__item_name_team .b-menu__link:after { content: 'Team'; } .b-menu__item_name_contacts .b-menu__curr:after, .b-menu__item_name_contacts .b-menu__link:after { content: 'Contacts'; } 

 /*   «ru.css» *//**/ .b-menu__item_name_main .b-menu__curr:after, .b-menu__item_name_main .b-menu__link:after { content: ' '; } .b-menu__item_name_portfolio .b-menu__curr:after, .b-menu__item_name_portfolio .b-menu__link:after { content: ''; } .b-menu__item_name_team .b-menu__curr:after, .b-menu__item_name_team .b-menu__link:after { content: ''; } .b-menu__item_name_contacts .b-menu__curr:after, .b-menu__item_name_contacts .b-menu__link:after { content: ''; } 

आगे आपको बस इस क्रम में फ़ाइलों को जोड़ने की आवश्यकता है: main.css, en.css, ru.css। खैर, या पहले ru.css, और en.css - फिर। जिसके आधार पर भाषा मुख्य है। सिद्धांत रूप में, कुछ भी डिफ़ॉल्ट CSS गुणों को main.css में धकेलने से नहीं रोकता है, और केवल उपयोगकर्ता द्वारा चयनित भाषा फ़ाइल शामिल है। मैं केवल दृष्टांत उद्देश्यों के लिए दो फाइलों में विभाजित हूं।

पेशेवरों:

+ यह विधि सभी आधुनिक ब्राउज़रों द्वारा समर्थित है, जिनमें आठवें और नौवें संस्करणों के IE शामिल हैं, जिनमें iPhone और Android के लिए मोबाइल ब्राउज़र शामिल हैं;

+ सीएसएस फ़ाइल ब्राउज़र द्वारा कैश की जाती है, जिसका अर्थ है कि एक बार डाउनलोड करने के बाद, इसे स्थानीय रूप से लंबे समय तक संग्रहीत किया जाएगा (वास्तव में जब तक हेडर कैश को अपडेट करने की आवश्यकता को इंगित करने वाले सर्वर से नहीं आता है);

+ आवश्यक लोकेल लगाने के लिए पेज को फिर से लोड करने की आवश्यकता नहीं है। बस जावास्क्रिप्ट के साथ <लिंक> टैग के href बदलें। या वांछित href के साथ एक नया <लिंक> टैग बनाएं।

विपक्ष (दुर्भाग्य से, उनमें से अधिक):

- आठवें संस्करण से पहले IE संपत्ति सामग्री को नहीं समझता है:; और साथ ही कुछ मोबाइल ब्राउज़र;

- खोज इंजन इस तरह से लिखे गए पाठ को अनुक्रमणित करने की संभावना नहीं है;

- सीएसएस संपत्ति सामग्री की सामग्री पर कई प्रतिबंध हैं;

- अधिक या कम जटिल लेआउट वाले प्लेसहोल्डर्स के लिए वर्ग नामों को सुव्यवस्थित करने के लिए, आपको उन्हें काफी लंबा बनाना होगा (भले ही आप बीईएम नामों का उपयोग न करें);

- स्वरूपण और छवियों के साथ लंबे ग्रंथों को बचाने में असमर्थता।

पुनश्च:

मैं नए विचारों का ढोंग नहीं करता।