पत्रों का लेआउट। कीड़े फिर से

ईवा गैलेसलॉट द्वारा छवि

नमस्ते!

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

Mail.ru के बारे में, मुझे फिलहाल कोई शिकायत नहीं है। इस वेबमॉर्ड के तहत ईमेल टाइप करना Google मेल के लिए उतना ही अच्छा है। यह देखना बहुत अच्छा है कि रूसी वेबमास्टरों ने पृष्ठभूमि छवियों का समर्थन करना शुरू कर दिया।

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

नीचे कुछ नए कीड़े हैं जिन्हें ईमेल तैयार करते समय विचार किया जाना चाहिए, और डेवलपर्स को उन्हें बंद करना चाहिए।

Mail.ru

जैसा कि मैंने कहा, ये लोग एक छोटे BUT को छोड़कर, सभी महान हैं। यदि हम पत्र में एक फोन नंबर (सिर्फ पाठ) दर्शाते हैं, तो यही नंबर छद्म-लिंक, नीले रंग में बदल जाता है, जब क्लिक किया जाता है, तो हम mail.ru वेब एजेंट के माध्यम से कॉल करेंगे।

<span class="js-phone-number highlight-phone" title="  -">+7(952)123 45 67</span> 

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

यैंडेक्स मेल

कई और विकार हैं। क्रम में:

1. टेबल फ्रेम

 <table width="400" cellpadding="0" cellspacing="0" style="border-collpase:collapse;"> <tr> <td width="50%" style="border-bottom:#999999 1px dashed;"></td> <td width="50%"></td> </tr> </table> 

हम क्या देखने की उम्मीद करते हैं? सब कुछ सरल है। तालिका के बाएं कक्ष को धराशायी निचली सीमा मिलनी चाहिए। हमें वास्तव में क्या मिलता है? बाएं सेल को एक ठोस सीमा मिलती है, और दाईं ओर धराशायी हो जाती है। क्यों? स्पष्ट नहीं है।

2. लाइन-ऊंचाई मैं एक लेआउट बटन का एक उदाहरण दूंगा:

 <table bgcolor="green" width="150" cellpadding="10" cellspacing="0" style="border-collpase:collapse;"> <tr> <td><a style="color:white !important;" href="#"></a></td> </tr> </table> 

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

 .b-message-body { line-height: 1.4; } 

से ब्राउज़र (1.2em) में स्वीकार किया जाता है। लेकिन यहां यह इतना सरल नहीं है।

 <table bgcolor="green" width="150" cellpadding="10" cellspacing="0" style="border-collpase:collapse;"> <tr> <td><a style="color:white !important; line-height:1.2em;" href="#"></a></td> </tr> </table> 

समस्या का समाधान नहीं करता है। और इसलिए यह काम करता है:

 <table bgcolor="green" width="150" cellpadding="10" cellspacing="0" style="border-collpase:collapse;"> <tr> <td style="line-height:1.2em;"><a style="color:white !important;" href="#"></a></td> </tr> </table> 

3. सेलस्पेसिंग
यहां सब कुछ अधिक दिलचस्प है। पहले, i.mail में इस विशेषता ने कुटिलता से काम किया था। मेज बस से गिर गई। डेवलपर्स ने बहुत दिलचस्प किया :) उन्होंने इसे इस तरह से बंद कर दिया:

 .b-message-body__content TABLE { border-collapse: collapse; } 

यह बहुत अच्छा है, लेकिन समाधान खराब है। यदि हमें कोशिकाओं के बीच पैडिंग की आवश्यकता नहीं है, तो हम सेलस्पेसिंग = "0" निर्दिष्ट कर सकते हैं और सब कुछ ठीक हो जाएगा। लेकिन वहाँ यह था। Microsoft लोग हमेशा की तरह विशेष हैं। यह डेस्कटॉप आउटलुक के लिए है कि टेबल सेल्स के बीच सिंगल-पिक्सल गैप से बचने के लिए आपको टेबल को गिराना होगा। इसलिए, मेरे पास मेल के डेवलपर्स के लिए एक ठोस अनुरोध है: "कृपया इस गलतफहमी को दूर करें।" मुझे खुशी होगी अगर इस पोस्ट को रोमन कोमारोव किजू , टीके ने देखा। मैं इन मुद्दों पर उनसे संपर्क नहीं कर सका।

जीवन में छोटी चीजें

यहां उपरोक्त डेवलपर्स से अनुरोध है: क्या आप कम से कम लिंक के लिए हेडर शैलियों के लिए समर्थन पेश कर सकते हैं? छद्म वर्गों को देखते हुए :: लिंक ,: होवर,: का दौरा किया। तथ्य यह है कि पत्र में लिंक मृत दिखते हैं। जब आप इस पर मंडराते हैं, या पाठ-सजावट को हटाते हैं, तो लिंक का रंग बदलना बहुत अच्छा होगा;

और एक और विस्तार। सीएसएस अधिकतम-चौड़ाई संपत्ति के बारे में क्या? यह मुख्य रूप से इसकी अनुपस्थिति के कारण है कि हम सबसे अधिक बार Media_queries लिखना पड़ता है।

धन्यवाद, मेरे पास सब कुछ है।