अपने CSS3 कोड मार्कअप स्लिम रखते हुए
वेब डेवलपर्स अधिक परिष्कृत CSS3 सिंटैक्स का उपयोग करके बहुत समय बचा सकते हैं। आपके पृष्ठ पर जाने वाले उपयोगकर्ता सबसे तेज़ संभव लोड समय की उम्मीद कर रहे हैं - जो फ़ाइल आकार को कम रखने के लिए आपकी जिम्मेदारी बनाता है। सीएसएस के साथ बहुत सारे शॉर्टहैंड ट्रिक्स हैं और विशेष रूप से नए CSS3 मॉडल के तहत.
मैंने नीचे दिए गए गाइड में इनमें से कुछ विचारों को एक साथ रखा है। हमें आपके सीएसएस कोड को छोटा करने जैसे अन्य क्षेत्रों पर भी ध्यान देना चाहिए। स्टाइलिंग प्रक्रिया में डेवलपर्स की सहायता के लिए इन-ब्राउज़र टूल उपलब्ध हैं लेकिन आप अपनी वेबसाइट की रेंडरिंग प्रक्रिया को अंतिम रूप देने के लिए इस फ़ाइल के आकार में कमी के साथ शॉर्टकोड को जोड़ना चाहेंगे।.
स्वरूपण पर बुनियादी सुझाव
इससे पहले कि हम वास्तविक सीएसएस सिंटैक्स में कूदें मैं इस विषय पर जाना चाहता हूं किस तरह अपने सीएसएस लिखने के लिए। यदि आप वेब डिज़ाइन से किसी भी तरह से परिचित हैं, तो आप संभवतः पहले एक स्टाइलशीट देख चुके हैं, शायद एक से अधिक बार। प्रत्येक कमांड के पहले भाग को कहा जाता है चयनकर्ता. यह तत्व के प्रकार को लक्षित करता है जो घुंघराले ब्रेस के अंदर जोड़े गए शैलियों को प्राप्त करेगा, जिसे रूप में भी जाना जाता है गुण.
इनलाइन स्तर
इनलाइन शैलियों के साथ प्रत्येक संपत्ति को अलग करने के लिए केवल रिक्त स्थान के साथ एक के बाद एक लिखा जाता है। यह विधि चयनकर्ताओं पर सबसे अच्छी तरह से लागू होती है जहां आपको केवल कुछ गुणों की आवश्यकता होती है। यह आपको पृष्ठ पर स्थान बचाएगा और आपकी स्टाइलशीट के माध्यम से स्क्रॉल करने में बहुत तेज़ होगा। यदि आपने पहले कभी इनलाइन सीएसएस का सामना नहीं किया है, तो मैंने HTML एंकर लिंक को लक्षित करने के लिए नीचे एक छोटा उदाहरण जोड़ा है.
एक color: # 648cc8; फोंट की मोटाई: बोल्ड; a: hover color: # 739cda; पाठ-सजावट: कोई नहीं; a.alt color: # bd4949! महत्वपूर्ण!
ब्लॉक स्तर
दूसरी ओर ब्लॉक-शैली के गुण एक कुंजी / मूल्य जोड़ी में एक पंक्ति में दर्ज किए जाते हैं और अक्सर कोड को स्कैन करते समय तेज संपादन के लिए प्रेरित होते हैं। लगभग 99% क्लीनर स्टाइलशीट मैं इस फॉर्मेटिंग का उपयोग करता हूं, और यह कई डिजाइनरों के लिए एक उद्योग मानक बन गया है। यदि आपका चयनकर्ता 6 या 7 से अधिक गुणों का उपयोग कर रहा है तो यह लागू करने के लिए सबसे अच्छा स्वरूपण है.
जब आप कई नए CSS3 गुणों को ध्यान में रखते हैं, तो आपको यह भी एहसास होता है कि आपकी स्टाइलशीट कितनी जल्दी भर जाती है। और इनमें से कई गुण ब्राउज़र-विशिष्ट प्रतियों का समर्थन करते हैं जिनके लिए लगभग डुप्लिकेट कोड प्रविष्टियों (जैसे सीमा त्रिज्या) की आवश्यकता होती है। आप एक नमूना रैपर div को लक्षित करके नीचे ब्लॉक की गई संपत्ति के मेरे उदाहरण की जांच कर सकते हैं.
.लपेटो प्रदर्शन: ब्लॉक; गद्दी: 6px 10px; पृष्ठभूमि: # एफएफ; सीमा-त्रिज्या: 4 पीएक्स; -मोज़-बॉर्डर-रेडियस: 4 पीएक्स; -वेबकिट-बॉर्डर-त्रिज्या: 4 पीएक्स; -ओ-सीमा-त्रिज्या: 4 पीएक्स;
सीएसएस लिखने का कोई तरीका विशेष रूप से अन्य की तुलना में बेहतर नहीं है। अंततः यह एक डेवलपर के रूप में आपकी पसंद है जिसे आप पसंद करते हैं, और यहां तक कि यह उस परियोजना के अनुसार भी होगा जिस पर आप काम करते हैं। यह सीएसएस को खोजने के लिए भी आम है जहां डिजाइनरों ने दोनों को एक साथ मिलाया है! मैं व्यक्तिगत रूप से ऐसा महसूस करता हूं “प्रगति में काम करता है” ब्लॉक-स्टाइल के साथ आसान हो जाते हैं क्योंकि मैं संपादन या परिवर्धन करने के लिए स्टाइलशीट की लगातार जांच कर रहा हूं। लेकिन आपकी सीएसएस फ़ाइल को छोटा करने वाले ट्रैफ़िक-भारी डोमेन के लिए जाने का सबसे अच्छा तरीका है.
उन्हें पतला रखना
CSS3 में उपलब्ध कई छोटे कोड का उपयोग करके आप बहुत सारे विकास समय बचा सकते हैं। HTML तत्वों को संपादित करना बहुत आसान हो जाएगा क्योंकि आप इस समय की बचत करने वाले लिंगो को समझते हैं। इसके अतिरिक्त आपका कोड अधिक साफ-सुथरा दिखाई देगा और देखने में आसान होगा.
केवल नकारात्मक पक्ष यह है कि सभी ब्राउज़र पूरी तरह से इन गुणों का समर्थन नहीं करते हैं। कई मौजूदा मुद्दों जैसे कि इंटरनेट एक्सप्लोरर और नेटस्केप में वर्कअराउंड हैं। शुक्र है कि वेब हमेशा आगे बढ़ रहा है और जैसा कि CSS3 लोकप्रियता में बढ़ता है, हम निस्संदेह ब्राउज़र की प्रगति में भी वृद्धि का अनुभव करेंगे.
RGBa रंग पारदर्शिता / अस्पष्टता
नया RGBavalue बिल्कुल CSS3 नहीं है संपत्ति, परंतु अल्फा पारदर्शिता केवल CSS3 के लिए विशिष्ट है. आम "रेड ग्रीन ब्लू" मूल्यों के बजाय आप अब रंग के लिए गुजरते हैं रंग पारदर्शिता का चौथा विकल्प शामिल करें. इस वजह से, वेब डेवलपर्स पारदर्शी पीएनजी के साथ लगभग पूरी तरह से किए जाते हैं.
मूल सिंटैक्स को पहले तीन (3) स्लॉट्स में 0-255 और अल्फा स्थिति में 0-1.0 के मान की आवश्यकता होती है। रंग रेंज विशिष्ट है कि प्रत्येक ह्यू (RGB) में से कितना 0 के साथ दिखाई दे रहा है और कुछ भी 255 पूर्ण नहीं है.
/ ** सिंटैक्स ** / पृष्ठभूमि: आरजीबीए (value_name, value_name, value_name, value_name, opacity_value); / ** उदाहरण ** / div पृष्ठभूमि: rgba (255, 255, 255, 0.3);
क्रॉस-ब्राउज़र संगतता
एक और संपत्ति अस्पष्टता कुछ परिस्थितियों में इस्तेमाल किया जा सकता है। हालांकि यह पूरे HTML तत्व और आंतरिक सामग्री को प्रभावित करेगा, न कि पृष्ठभूमि जैसा कि आपने मेरे उदाहरण में देखा था.
दुर्भाग्य से इंटरनेट एक्सप्लोरर अभी तक RGBa रंग मूल्य का समर्थन नहीं करता है। आपको आम तौर पर इन कम-मानक ब्राउज़रों के लिए पूर्ण अपारदर्शिता के साथ एक कमबैक संपत्ति शामिल करनी चाहिए। आप इसे उन्हीं मूल्यों के साथ सेट करते हैं, लेकिन 4 वें (अपारदर्शिता) को छोड़कर। यह कुछ इस तरह दिखेगा rgba (255, 255, 255)
इसके अतिरिक्त इंटरनेट एक्सप्लोरर को सशर्त रूप से थोड़ा अधिक सुंदर रूप से नियंत्रित किया जा सकता है। आप वास्तव में देख सकते हैं कि क्या ब्राउज़र IE चला रहा है और कमांड पर एक मालिकाना Microsoft CSS फ़िल्टर प्रदर्शित करता है। मैंने इसे अपने उदाहरण में नीचे प्रदर्शित किया है (ध्यान दें कि यह आपकी HTML फ़ाइल में कहीं दिखाई देगा):
CSS3 की सीमा त्रिज्या
मैंने CSS3 के साथ गोल बॉर्डर्स बनाने के बारे में कुछ भ्रमित मंच सूत्र पढ़े हैं - ऐसा नहीं है कि यह कैसे किया जाता है, लेकिन बारीक ब्राउज़र समर्थन के साथ, वेब डेवलपर्स सबसे आसान कोड के लिए और फ़ंक्शन को छोड़ने की उम्मीद कर रहे हैं.
/ ** सिंटैक्स ** / बॉर्डर-त्रिज्या: टॉप-लेफ्ट टॉप-राइट बॉटम-राइट बॉटम-लेफ्ट;
बॉर्डर-त्रिज्या संपत्ति एक मानक सीमा बनाने के समान सिंटैक्स साझा करती है, इस मामले को छोड़कर हम बॉक्स कोनों को लक्षित कर रहे हैं। यह संपत्ति वास्तव में 1 - 4 मूल्यों को स्वीकार करेगी और वे प्रत्येक कोनों के एक अलग सेटअप को लक्षित करते हैं.
- 1 मान: सभी चार कोनों को एक ही मूल्य पर गोल किया जाता है
- 2 मान: पहला मान लागू होता है
बाएं से बाएंतथानीचे दाएंजबकि दूसरा मूल्य हिट हैठीक तरह से ऊपरतथानीचे बाएँ - 3 मान: पर लागू होता है
बाएं से बाएंकोने, दूसरा दोनों हैनीचे बाएँऔरठीक तरह से ऊपरजबकि तीसरे और अंतिम मूल्य पर लागू किया जाता हैनीचे दाएं - 4 मान: सभी 4 मान निम्न क्रम में कोनों को लक्षित करते हैं: टॉप-लेफ्ट, टॉप-राइट, बॉटम-राइट, बॉटम-लेफ्ट
/ ** उदाहरण ** / div बॉर्डर-त्रिज्या: 4px 4px 8px 4px; div बॉर्डर-त्रिज्या: 4px 4px 8px;
इसलिए ऊपर दिए गए कोड में हम उपयोग कर रहे हैं बॉर्डर-त्रिज्या सिवाय सब कुछ पर 4px गोल प्रभाव लागू करने के लिए नीचे दाएं सीमा जो एक 8px चिकनी वक्र हो जाता है। यदि आपने इसे देखा है, तो ये दोनों कोड वास्तव में एक ही शैली के प्रभाव को लागू करेंगे.
क्रॉस-ब्राउज़र संगतता
अब मुख्य समस्या यह है कि बॉर्डर-त्रिज्या केवल कुछ ब्राउज़रों के भीतर ही समर्थित है। इंटरनेट एक्सप्लोरर 9 ने हाल ही में बहुत अच्छा समर्थन जोड़ा है और ओपेरा इसे भी प्रस्तुत करेगा। हालाँकि ओपेरा ने भी अपनी संपत्ति बनाई है -ओ-बॉर्डर-त्रिज्या अपने विशिष्ट ब्राउज़र इंजन को लक्षित करना। इसके अतिरिक्त -moz-बॉर्डर-त्रिज्या फ़ायरफ़ॉक्स / गेको सॉफ्टवेयर द्वारा समर्थित है और -वेबकिट-बॉर्डर-त्रिज्या Google Chrome / Safari के लिए.
नीचे दिया गया कोड सबसे बड़े वैश्विक ब्राउज़र समर्थन के साथ गोल कोनों को बनाने के लिए मेरे नंगे-हड्डी टेम्पलेट का एक उदाहरण है.
div सीमा-त्रिज्या: 4px 4px 8px 4px; -webkit- सीमा-त्रिज्या: 4px 4px 8px 4px ;; -मोज़-बॉर्डर-रेडियस: 4 पीएक्स 4 पीएक्स 8 पीएक्स 4 पीएक्स; -ओ-बॉर्डर-त्रिज्या: 4px 4px 8px 4px;
फैंसी एक ड्रॉप छाया?
CSS3 का वास्तव में बहुत बढ़िया पहलू इसके लिए समर्थन है डिब्बा तथा पाठ छाया. यह अतीत में डेवलपर्स के लिए ऐसी समस्या रही है क्योंकि पृष्ठभूमि की छवियां एकमात्र यथार्थवादी विकल्प थीं। यह सिंटैक्स वास्तव में एक छोटी भूमिका निभाता है जो हमारे द्वारा कवर किए गए अन्य गुणों की तुलना में बहुत आसान है। पहली बार में महत्वपूर्ण मानों के उचित क्रम को याद रखना मुश्किल है - लेकिन जितना अधिक आप अभ्यास करेंगे, उतना आसान हो जाएगा.
दुर्भाग्य से इंटरनेट एक्सप्लोरर एक बार फिर से अजीब है। फ़ायरफ़ॉक्स, गूगल क्रोम, सफारी और ओपेरा सहित हर दूसरे प्रमुख ब्राउज़र पूरी तरह से समर्थन करते हैं पाठ की छाया संपत्ति। डेवलपर्स ने अपना IE समर्थन बनाने की कोशिश की है लेकिन अभी भी बहुत सीमित है। मूल सिंटैक्स इस प्रकार लिखा जाता है:
/ ** वाक्य रचना ** / पाठ-छाया: x- ऑफसेट y- ऑफसेट कलंक-त्रिज्या रंग; / ** उदाहरण ** / div पाठ-छाया: 2px 2px 1px # 111;
X और Y ऑफसेट ब्राउज़र को बताता है कि छाया कितनी दूर तक सही और कम दिखाई देनी चाहिए। आप क्रमशः ऊपर और बाईं ओर छाया की स्थिति के लिए नकारात्मक मूल्यों का उपयोग कर सकते हैं। लेकिन यह बहुत अजीब लग रहा है तो मैं सकारात्मक पूर्णांक की सलाह देता हूं। इसके अलावा, धुंधला-त्रिज्या मान का उपयोग कठोर किनारों को चिकना करने के लिए किया जा सकता है, यदि पाठ छाया अप्राकृतिक दिखाई देता है.
यह सिंटैक्स केवल सिंगल ड्रॉप शैडो इफ़ेक्ट बनाते समय मूल नोटेशन में दिखता है। अत्यधिक उन्नत डिजाइनरों ने एक साथ कई छाया बनाने के लिए भी अध्ययन किया है! मैं अप्रैल २०११ में इस भयानक ब्लॉग पोस्ट का संदर्भ देता हूं जो पाठ छाया लगाने पर बहुत विस्तार से बताता है। यदि आपके पास समय है, तो सामग्री के माध्यम से स्किम करें और अधिक उन्नत सुविधाओं का विचार प्राप्त करें, और इसे भविष्य के संदर्भ के रूप में बुकमार्क करना सुनिश्चित करें!
क्रॉस-ब्राउज़र संगतता
हमारे द्वारा चलाया जाने वाला सबसे बड़ा अवरोधक Internet Explorer है। समय और समय फिर से Microsoft ने अपने स्वयं के ब्राउज़र रेंडरिंग इंजन को बाहर धकेल दिया है जिसने सबसे अच्छा उप-प्रदर्शन किया है। अब भी CSS3 के साथ पाठ छाया में शासन ले रहा है, IE अभी भी पीछे है। एक शानदार डेमो वेबसाइट है जहां आप कोड उदाहरण और पारंपरिक सीएसएस सशर्त टिप्पणियां पा सकते हैं.
मूल रूप से आप यह देखना चाहते हैं कि आपका उपयोगकर्ता जो ब्राउज़र चला रहा है वह इंटरनेट एक्सप्लोरर 9 या उससे नीचे के किसी भी संस्करण से मेल खाता है या नहीं। फिर एमएस फिल्टर का उपयोग करके हम किसी भी पाठ तत्व में एक छाया लागू कर सकते हैं (ऊपर, हम एक पैराग्राफ का उपयोग कर रहे हैं).
आसान बदलाव
CSS3 संक्रमण दादी के फ्लैपजैक के बाद से डिजाइन बाजार पर सबसे संपत्ति है! वेब डिजाइनर शुद्ध CSS बदलावों के बारे में ऐसा उपद्रव कर रहे हैं, भले ही समर्थन मुख्य रूप से वेबकिट ब्राउज़रों तक सीमित है। आप निश्चित रूप से मोज़िला और ओपेरा और इस तरह के लिए माध्यमिक गुणों का उपयोग कर सकते हैं। लेकिन आशुलिपि संकेतन वास्तव में मनोरम है, खासकर यदि आप जो भी कारण के लिए जावास्क्रिप्ट एनिमेशन के खिलाफ हैं.
सबसे पहले आइए मूल संक्रमण संपत्ति पर एक नज़र डालें। इसके लिए 4 मूल्यों की आवश्यकता होगी जिन्हें आप स्वयं संपत्तियों में भी तोड़ सकते हैं। वे संक्रमण के साथ मेल खाते हैं संपत्ति(क्या प्रभाव है), अवधि(इसे कब तक निकालना है), समय-समारोह(एनीमेशन पर गति में परिवर्तन), और विलंब(एनिमेशन करने से पहले प्रतीक्षा करने के लिए सेकंड की संख्या).
/ ** सिंटैक्स ** / संक्रमण: संपत्ति अवधि समय-फ़ंक्शन देरी; / ** उदाहरण ** / img संक्रमण-संपत्ति: अपारदर्शिता; संक्रमण-अवधि: 2 एस; संक्रमण-समय-समारोह: आसानी से; संक्रमण-देरी: 0.5 एस;
संभवत: टाइमिंग फ़ंक्शन को छोड़कर आपको इनमें से अधिकांश गुणों के उद्देश्य को समझना चाहिए। हालांकि पहली बार में भ्रमित करना, यह संपत्ति आपके संक्रमण को अलग तरह से दर्शाती है इसलिए प्रभाव धीमा, धीमा या कुछ इसी तरह शुरू हो जाएगा.
W3 स्कूल्स में ऑनलाइन एक टाइमिंग फंक्शन doc है जो उन सभी संभावित मूल्यों को सूचीबद्ध करता है जिन्हें आप आज़मा सकते हैं। मैं लगातार इन गाइडों के लिए खुद को गुग्लिंग पाता हूं, फिर भी वे ऐसे आसान बुकमार्क बनाते हैं.
क्रॉस-ब्राउज़र संगतता
अब प्ले में फुल ब्राउजर सपोर्ट लाते हैं। डिफ़ॉल्ट रूप से संक्रमण गुण है केवल सफारी के नए संस्करणों द्वारा समर्थित। फिर भी कई उपयोगकर्ताओं को अभी भी इसकी आवश्यकता है -वेबकिट उपसर्ग जो Google Chrome और समान रेंडरिंग इंजन पर भी लागू होता है। नीचे एक है “अंतिम रूप दिया” कोड ब्लॉक टेम्प्लेट मैं सहेजने और उपयोग करने की सलाह देता हूं यदि आपको अधिकांश वेब ब्राउज़र से संक्रमण समर्थन की आवश्यकता है.
img संक्रमण: अपारदर्शिता 2s आसानी-1s में; -वेबकैट-संक्रमण: अपारदर्शिता 2s आसानी-1s में; / * क्रोम, सफारी, झुंड * / -मोज़-संक्रमण: अपारदर्शिता 2s आसानी से 1s में; / * मोज़िला + गेको * / -ओ-संक्रमण: अपारदर्शिता 2s आसानी से 1s में; / * ओपेरा * /
पाठ-स्ट्रोक प्रभाव
यह गुण बहुत बड़ा नहीं है और आपको आज इसका उपयोग करने वाले कई वेब डिज़ाइनर नहीं मिलेंगे। लेकिन आप उपयोग कर सकते हैं पाठ-स्ट्रोक अपने फोंट के साथ कुछ बहुत साफ प्रभाव बनाने के लिए। सफारी और क्रोम जैसे वेबकिट ब्राउज़र इस संपत्ति के अब तक के एकमात्र सच्चे समर्थक हैं। ओपेरा और फ़ायरफ़ॉक्स को इन समान रूपरेखाओं के साथ पाठ वस्तुओं को प्रस्तुत करने में कठिनाई होती है.
/ ** सिंटैक्स ** / पी -वेबकैट-टेक्स्ट-स्ट्रोक: चौड़ाई का रंग; / ** उदाहरण ** / p -विवेक-पाठ-स्ट्रोक: 1px # 222;
क्रॉस-ब्राउज़र संगतता
यदि आपको पाठ स्ट्रोक प्रभावों की आवश्यकता महसूस होती है, तो आपको हमेशा एक बैकअप रंग शामिल करना चाहिए। मोज़िला और ओपेरा द्वारा प्राप्त कर सकते हैं, हालांकि इंटरनेट एक्सप्लोरर उपयोगकर्ताओं के पास कोई अन्य विकल्प नहीं है। अफसोस की बात है कि यह नए CSS3 गुणों में से एक है, जिसने अभी वेब ब्राउज़र डेवलपर्स के समुदाय से पर्याप्त समर्थन प्राप्त नहीं किया है। आपको विशेष रूप से इन CSS3 पाठ रूपरेखाओं के निर्माण के लिए बनाए गए इस महान वेब टूल के साथ खेलने में कुछ समय बिताना चाहिए.
बॉक्स आकार
बॉक्स-आकार की संपत्ति आपको किसी भी ब्लॉक तत्व की कुल चौड़ाई / ऊंचाई पर अधिक नियंत्रण प्रदान करती है। डिफ़ॉल्ट रूप से चौड़ाई / ऊंचाई + बॉर्डर + मार्जिन + पैडिंग एक बॉक्स के कुल आकार को बनाते हैं। हालाँकि आपकी सामग्री पर बॉर्डर-बॉक्स का उपयोग करना आपके सभी पैडिंग और मार्जिन को धक्का देता है आंतरिक चौड़ाई को बिल्कुल समान रखने के लिए। इस संपत्ति के लिए केवल दो मूल्य हैं, के साथ सामग्री बॉक्स डिफ़ॉल्ट होना.
div चौड़ाई: 550px; गद्दी: 9 पीएक्स; box-sizing: बॉर्डर-बॉक्स; / * चौड़ाई 550px पर रहेगी * /
जैसा कि आप सोच सकते हैं कि यह आपके सीएसएस कैरियर के दौरान कुछ बिंदु पर काम आएगा। पैडिंग और मार्जिन एक वास्तविक दर्द हो सकता है और जब आप सीमाओं में जोड़ते हैं तो आप पिक्सल का ट्रैक खो देते हैं.
क्रॉस-ब्राउज़र संगतता
ओपेरा और IE 8 डिफ़ॉल्ट रूप से इस नई संपत्ति का समर्थन करते हैं। जब तक आपके विज़िटर quirks मोड का उपयोग नहीं कर रहे हैं IE7 और नीचे कंटेंट बॉक्स सेटअप के साथ अटका हुआ है। केवल परिवर्धन आपको विशेष रूप से वेबकिट और मोज़िला-संचालित ब्राउज़र इंजनों के बारे में जानना चाहिए.
div -webkit-box-sizing: बॉर्डर-बॉक्स; / * सफ़ारी / क्रोम * / -मोज़-बॉक्स-आकार: बॉर्डर-बॉक्स; / * फ़ायरफ़ॉक्स * / बॉक्स-आकार: बॉर्डर-बॉक्स; / * ओपेरा / IE8 + * /
शुद्ध CSS3 के कॉलम
कॉलम CSS3 के साथ थोड़ा मुश्किल हैं लेकिन न्यूनतम कोड के साथ पूरा किया जा सकता है। जिन 2 गुणों पर आप ध्यान देना चाहते हैं, वे हैं स्तंभ गिनती तथा स्तंभ की खाई. गणना उस कॉलम की कुल संख्या को संदर्भित करती है जिसे आप लागू करना चाहते हैं जबकि अंतर प्रत्येक के बीच एक मार्जिन बनाता है.
div # cols कॉलम-गणना: 3; स्तंभ-अंतर: 10px ;;
मेरे उदाहरण में हम ID #cols को कंटेनर के रूप में उपयोग करते हुए देख सकते हैं। अंदर हम प्रत्येक के बीच 10px अंतर के साथ div को 3 कॉलम में विभाजित करते हैं। आगे आप सेट कर सकते हैं स्तंभ की चौड़ाई जिसका उपयोग ठोस संख्या को सूचीबद्ध करने के बजाय प्रत्येक स्तंभ की कुल चौड़ाई निर्धारित करने के लिए किया जाता है.
क्रॉस-ब्राउज़र संगतता
IE8 से पहले कुछ भी बस इस संपत्ति का उपयोग करने में सक्षम नहीं होगा। लेकिन जैसा कि हमने हर उदाहरण में देखा है, मोज़िला और वेबकिट कई ब्राउज़रों के लिए अपने समाधान पेश करते हैं। यदि आपको एक टेम्पलेट की आवश्यकता है, तो नीचे मेरा छोटा उदाहरण कोड देखें:
div # साइडबार चौड़ाई: 210px; -मोज़-कॉलम-गिनती: 3; -मोज़-कॉलम-गैप: 7 पीएक्स; -वेबकिट-कॉलम-गिनती: 3; -वेबकिट-कॉलम-गैप: 7 पीएक्स; स्तंभ-गणना: 3; कॉलम-गैप: 7 पीएक्स;
कस्टम @ फ़ॉन्ट-चेहरा
आपने CSS3 कस्टम फोंट के बारे में उत्साह के बारे में सुना होगा। खैर @ फॉन्ट-फेस प्रॉपर्टी का उपयोग करके हम बाहरी फॉन्ट स्टाइल आयात कर सकते हैं और किसी अन्य परिवार की तरह ही इनका उपयोग कर सकते हैं। वाक्यविन्यास कुछ हद तक जटिल है और आपको इसे सही होने में कुछ समय बिताना होगा। के लिए ब्लॉक @फॉन्ट फ़ेस एक पारिवारिक नाम को परिभाषित करने के लिए उपयोग किया जाता है, बाद में आप इसे अपने में उपयोग कर सकते हैं फ़ॉन्ट परिवार गुण जहाँ कहीं भी हों!
@ फ़ॉन्ट-चेहरा फ़ॉन्ट-परिवार: 'MyNewFont'; src: url ('New_Font.ttf'), url ('New_Font.eot'); / * इंटरनेट एक्सप्लोरर केवल * / इसलिए आप ऊपर देख रहे हैं कि मैं किसी विशिष्ट फ़ॉन्ट प्रकार को लक्षित नहीं कर रहा हूं, लेकिन वाक्यविन्यास वह है जो बाहर खड़ा होना चाहिए। ध्यान दें कि इंटरनेट एक्सप्लोरर केवल समर्थन करता है .EOT फ़ॉन्ट प्रकार, जबकि .ttf तथा .otf अन्य ब्राउज़रों के लिए लोकप्रिय विकल्प हैं। महत्व के अलावा, आपको यह समझना चाहिए कि आप सीधे लिंक से फ़ॉन्ट URL में पास कर सकते हैं, अर्थात. यूआरएल ( 'https://www.hongkiat.com/css3/fonts/myfont.ttf');
इस सेटअप के साथ कोई वास्तविक क्रॉस-ब्राउज़र समस्या नहीं है क्योंकि सभी रेंडरिंग इंजन इन फ़ॉन्ट फ़ाइल प्रकारों को पार्स कर सकते हैं। बस याद रखें कि IE समर्थन के लिए आपको एक ईओटी संस्करण के साथ-साथ अपने मूल को भी शामिल करना होगा। मुझे लगता है कि डब्ल्यू 3 स्कूलों के लेख में सबसे महत्वपूर्ण जानकारी की एक सूची है जिसे आपको जांचना चाहिए.
लघु सीएसएस में परिवर्तित
इस विषय पर अक्सर बहस की जाती है क्योंकि यह प्रत्येक परियोजना के लिए एक अलग उद्देश्य प्रदान करता है। एक तरफ, वेब डेवलपर्स अपनी स्टाइलशीट लिखने में बहुत समय बिताते हैं। इस प्रकार के प्लेनटेक्स्ट डेटा को एन्क्रिप्ट करने और इसे स्नूपिंग आँखों से छिपाने का कोई तरीका नहीं है। यदि आप दूसरों को अपने कोड को चोरी करने से रोकने का प्रयास कर रहे हैं तो आप जो सबसे अच्छा कर सकते हैं, वह शैलियों को अव्यवस्थित कर सकता है और सभी स्थानों या स्थानों को हटा सकता है.
इस प्रक्रिया के रूप में लेबल किया जा सकता है miniaturizing तुम्हारा कोड। आमतौर पर डेवलपर्स सीएसएस को मानक प्रारूप में लिखेंगे और फिर वेब सर्वर पर अपलोड करने से पहले सभी व्हाट्सएप को हटा देंगे। फिर आपके पास लाइव प्रोजेक्ट पर एक छोटा संस्करण प्रदान करते हुए जल्दी से संपादित करने के लिए एक स्थानीय प्रतिलिपि है। यह विधि स्पष्ट रूप से बे पर कोड अपहर्ताओं को रखने के साथ पेज लोड को कम करने के लिए उपयोगी हो सकती है.
जो लिंक मैंने ऊपर Minify CSS पर पोस्ट किया है, उसमें इस विषय पर कुछ बेहतरीन पठन सामग्री है। साइट आपके कोड से ऐसे व्हाट्सएप और प्रमुख रिटर्न को हटाने के लिए एक ब्राउज़र-आधारित टूल भी प्रदान करती है। CSS कंप्रेसर एक सरल इंटरफ़ेस को स्पोर्ट करने का एक अन्य विकल्प है जो सीधे आपके वेब ब्राउज़र में चलता है। मैंने क्लीन सीएसएस के बारे में अच्छी बातें भी सुनी हैं, हालांकि मैंने खुद ऐप का इस्तेमाल कभी नहीं किया.
सम्बंधित लिंक्स
आपको आगे बढ़ाने के लिए मैंने वेब से छह आसान लिंक प्रदान किए हैं। इसमें न केवल शॉर्टहैंड नोटेशन शामिल है, बल्कि इस नए शॉर्टहैंड सीएसएस कोड का अभ्यास करते समय उपयोगी मार्गदर्शक और ट्यूटोरियल भी शामिल हैं.
- CSS3 के लिए शुरुआती गाइड
- सीएसएस आशुलिपि गाइड
- क्या आप CSS3 का उचित उपयोग कर रहे हैं?
- सीएसएस सामग्री और ब्राउज़र संगतता चार्ट
- CSS3 + प्रगतिशील वृद्धि = स्मार्ट डिज़ाइन
- पूरा CSS / CSS3 गुण सूचकांक
निष्कर्ष
एक ठोस शेड्यूल बनाने के लिए सीएसएस कोड लिखने में बहुत समर्पण और अभ्यास करना पड़ता है जिसे आप प्रत्येक प्रोजेक्ट के लिए अनुसरण कर सकते हैं। अधिकांश वेब डिजाइनर नई परियोजनाओं और विचारों को लेने के लिए खुश हैं, इसलिए आपको निश्चित रूप से इन सहायक कोडिंग युक्तियों का अभ्यास करने का समय मिलेगा। यदि आपको कोई धोखा-पत्र नहीं मिल रहा है, या इससे भी बदतर है कि आप इंटरनेट कनेक्शन खो देते हैं, तो अपनी स्वयं की सुविधा के लिए एक छोटी सी संदर्भ पत्रक की प्रतिलिपि बनाने का प्रयास करें!
क्या आप किसी अन्य आसान CSS3 गुण या शॉर्टकट के बारे में जानते हैं? हम चर्चा टिप्पणियों में आपके विचारों और विचारों को सुनना पसंद करेंगे। वेब डेवलपर्स W3C के भीतर अधिक मानकीकरण पर जोर दे रहे हैं और स्पष्ट रूप से संक्रमण आसान हो रहा है। CSS3 शानदार लाभ प्रदान करता है और यदि आप शॉर्टहैंड कोडिंग में महारत हासिल कर सकते हैं तो इससे आपकी फ़ाइल का आकार कम रहेगा और आपके कोड को चोरी करने से कॉपीराइटर को रोकेंगे.
