छद्म तत्वों का उपयोग करके बटनों के HTML-लेआउट की विधि

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

यह कुछ इस तरह देखा गया:



एचटीएमएल

< div class ="large_button" > <br> < span class ="buttons submit_v2-button clickable" > <br> < i class ="left left2" ></ i > <br> < i class ="body" > <br> < b > </ b > <br> < i class ="end" > <br> < i ></ i > <br> </ i > <br> </ i > <br> </ span > <br> </ div >

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

इसलिए, मेरा अनिर्दिष्ट कार्य कोड को यथासंभव सरल बनाना था।

प्रारंभ में, सभी छवियों का उपयोग किए बिना सभी बटन बनाने के लिए विचार आया, जैसा कि हैबर के एक लेख में वर्णित किया गया था।

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

समाधान जो पूरी तरह से मेरे अनुकूल था, छद्म तत्वों के पहले: और का उपयोग करना था।

पहला कदम प्रणालीगतकरण था। सभी बटन समूहों में आकार, छवि और पृष्ठभूमि के अनुसार क्रमबद्ध किए गए थे।

इसे बहुत अच्छा बनाने के लिए, सभी बटन ग्राफिक्स को एक स्प्राइट में जोड़ा गया।
नतीजतन, इसने छवियों की कुल मात्रा और http- अनुरोधों की संख्या में एक सभ्य बचत दी।

मुझे कहना होगा कि मैं टीम के साथ बहुत भाग्यशाली था, जिनके समय के साथ आम प्रयासों में, हमने इंटरनेट एक्सप्लोरर 6 में हमारी साइट का समर्थन करने के नेक्रोफिलिया को छोड़ दिया।

उपरोक्त महत्वपूर्ण घटना से दो सप्ताह बाद, मेरी राय में, बटन के लेआउट का संस्करण दिखाई दिया:

एचटीएमएल

< div class ="neobtn-thick" > </ div >

सीएसएस

/* */
*[class*=neobtn]{
text-shadow: 0 1px 0 #ddd;
cursor: pointer;
background-color: transparent;
display: inline-block;
background-image: url(../images/buttons/buttons.png);
white-space: nowrap;
}
*[class*=neobtn]:before{
background-image: url(../images/buttons/buttons.png);
content: '';
float: left;
}
*[class*=neobtn]:after{
background-image: url(../images/buttons/buttons.png);
content: '';
float: right;
}

/* . 46px */
*[class*=neobtn-thick]{
height: 46px;
margin: 0 25px 0 45px;
line-height: 45px;
font-size: 24px;
background-position: 0 -153px;
}
*[class*=neobtn-thick]:before{
height: 46px;
width: 45px;
background-position: 0 -245px;
margin: 0 0 0 -45px;
}
*[class*=neobtn-thick]:after{
height: 46px;
width: 25px;
margin: 0 -25px 0 0;
background-position: 0 -199px;
}

/* */
*[class*=neobtn-thick-create]:before{background-position: 0 -291px;}
*[class*=neobtn-thick-go]:before{background-position: 0 -429px;}
*[class*=neobtn-thick-down]:before{background-position: 0 -567px;}

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

Internet Explorer 7 के लिए, कोड लगभग समान है, केवल HTML ऐड-इन तत्वों की बजाय हमारी आवश्यकता के HTML तत्वों को बनाने के लिए InsertAdjacentHTML विधि का उपयोग किया जाता है, और इंडेंटेशन के बजाय पूर्ण स्थिति का उपयोग किया जाता है।

सीएसएस

*[class*=neobtn]{
zoom: expression(runtimeStyle.zoom = 1,
insertAdjacentHTML('afterBegin',' < div class ="before" ></ div >< div class ="after" ></ div > '));
position: relative;
display: inline;
}
.before,
.after{
background-image: url(../images/buttons/buttons.png);
top: 0;
position: absolute;
}

/* BUTTONS */
/* 46px */
*[class*=neobtn-thick] .before{
height: 46px;
width: 45px;
background-position: 0 -245px;
left: -45px;
}
*[class*=neobtn-thick] .after{
height: 46px;
width: 25px;
right: -25px;
background-position: 0 -199px;
}
*[class*=neobtn-thick-create] .before{
background-position: 0 -291px;
}
*[class*=neobtn-thick-go] .before{
background-position: 0 -429px;
}
*[class*=neobtn-thick-down] .before{
background-position: 0 -567px;
}

इस सीएसएस-कोड को एक अलग फ़ाइल में रखना समझ में आता है, इसे केवल सशर्त टिप्पणियों के माध्यम से इंटरनेट एक्सप्लोरर 7 के उपयोगकर्ताओं के लिए शामिल करें, ताकि दर्द के मामले में इससे छुटकारा पाने के लिए दर्द रहित हो:

<!--[if IE 7]><link rel="stylesheet" type="text/css" media="screen" href="/css/buttons_ie.css" /><![endif]-->

विधि में मामूली सुधार आपको टाइप सबमिट का एक बटन सजाने की अनुमति देता है:

एचटीएमएल

< div class ="neobtn-thick" >< input type ="submit" value ="" /></ div >

सीएसएस

*[class*=neobtn-thick] input[type=submit]{<br> margin: 0 -17px 0 -37px;<br> padding: 0 12px 0 33px;<br> height: 46px;<br> font-size: 100%;<br> font-family: Arial;<br> text-shadow: 0 1px 0 #ddd;<br> color: #222;<br>}

और यदि आप बटन में एक मनमाना छवि सम्मिलित करना चाहते हैं, तो आपको एक और तत्व जोड़ना होगा और वांछित चित्र को उसकी पृष्ठभूमि बनाना होगा:

एचटीएमएल

< div class ="neobtn-thick" >< span class ="delete" ></ span > </ div > <br><br>

सीएसएस

.delete {<br> background url(url);<br> width: 00px;<br> height: 00px;<br> display: inline-block;<br>}<br>

इस पद्धति का संपूर्ण आकर्षण "तारांकन" चयनकर्ता का उपयोग है, जो आपको बिना किसी डर के किसी भी टैग से एक बटन बनाने की अनुमति देता है कि "newelln-thick-create" के बजाय आप "trololoNEOBTN-THICK-CREATElo" लिखते हैं।

इस मामले में एकमात्र महत्वपूर्ण समस्या वर्ग के नाम के पहले शब्द के साथ आना है ताकि यह अन्य तत्वों के वर्ग नाम का हिस्सा न हो। उदाहरण के लिए, आपको "बटन" या "बीटीएन" जैसे स्पष्ट शब्दों का उपयोग नहीं करना चाहिए। इस कारण से, उदाहरणों में, वर्ग के नाम "newelln" से शुरू होते हैं।

नए बटन जोड़ना भी मुश्किल नहीं है:

1. हम सामान्य स्प्राइट में नई छवियां बनाते हैं
2. सीएसएस में उचित नियम जोड़ें
3. लाभ!

विधि के कुछ नकारात्मक पहलू हैं:

1. सिद्धांत में "तारांकन" चयनकर्ता का उपयोग करना पृष्ठ को कुछ हद तक प्रस्तुत करने की प्रक्रिया को धीमा कर देता है। हालांकि, यह ध्यान देने योग्य है कि मैंने कोई महत्वपूर्ण देरी हासिल करने का प्रबंधन नहीं किया। पृष्ठ पर बटन की संख्या एक या दो दर्जन से अधिक नहीं होती है, और टैग की संख्या में कमी को ध्यान में रखते हुए, गति में अंतर को समतल किया जाता है।
2. जब "केवल पाठ" मोड में स्केलिंग - सब कुछ अलग हो जाएगा।

सैद्धांतिक रूप से, वर्गों और संशोधक के नाम अलग-अलग लिखना संभव होगा:

< div class ="button button-thick button-thick-create" > </ div > <br>

लेकिन इस मामले में किसी तरह की अतिरेक और तनातनी पैदा होगी।

नतीजतन, मुझे उन्नत और "क्लासिक" एचटीएमएल-लेआउट प्रौद्योगिकियों के बीच एक क्रॉस मिला।

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

उदाहरण

मेरी साइट पर एक ही लेख ।

# 1 अद्यतन करें: सार्वभौमिक चयनकर्ता पर अधिक
# 2 अद्यतन करें: यदि आप विशेषता चयनकर्ताओं से पहले "तारांकन" चयनकर्ताओं के बारे में चिंता करते हैं, तो आप आसानी से उनसे छुटकारा पा सकते हैं। बटनों का लेआउट प्रभावित नहीं होगा।