👩🏻‍🤝‍👨🏾 🎋 🐍 बुनियादी शैलियों और उपयोगी सीएसएस स्निपेट्स 🦉 ⛺️ 🧛🏻

इस लेख में उपयोगी और "सही" शैलियों और स्निपेट्स शामिल हैं जो साइट को विकसित करने की प्रक्रिया को गति देने में मदद करेंगे, साथ ही साथ लेआउट का अनुकूलन भी करेंगे।

1. बेसिक HTML5 डिजाइन

किसी भी पृष्ठ का मुख्य कोड जिस पर कई डेवलपर्स अपर्याप्त ध्यान देते हैं। पुराने ब्राउज़रों में सही प्रदर्शन के लिए JQuery 1.8.2 और HTML5shiv जुड़े हुए हैं ।

<!doctype html> <html lang="en-US"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Default Page Title</title> <link rel="shortcut icon" href="favicon.ico"> <link rel="icon" href="favicon.ico"> <link rel="stylesheet" type="text/css" href="styles.css"> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> </body> </html>

2. डिफ़ॉल्ट ब्राउज़र शैलियों को रीसेट करें

विभिन्न ब्राउज़रों में समान कोड अलग-अलग प्रदर्शित किए जा सकते हैं। शैलियों को रीसेट करने से ऐसी समस्याओं से बचने में मदद मिलेगी।

 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; outline: none; } html { height: 101%; } /* always display scrollbars */ body { font-size: 62.5%; line-height: 1; font-family: Arial, Tahoma, Verdana, sans-serif; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } strong { font-weight: bold; } input { outline: none; } table { border-collapse: collapse; border-spacing: 0; } img { border: 0; max-width: 100%; } a { text-decoration: none; } a:hover { text-decoration: underline; }

3. CSS3 ग्रेडिएंट्स

नीचे दिए गए कोड सीएसएस ग्रेडिएंट को क्रॉस-रेंडर करने में मदद करेंगे। यह वांछित चयनकर्ता में जोड़ा जाता है, आप पारदर्शिता के लिए आरजीबीए () का उपयोग कर सकते हैं।

 background-color: #000; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bbb', endColorstr='#000'); background-image: -webkit-gradient(linear, left top, left bottom, from(#bbb), to(#000)); background-image: -webkit-linear-gradient(top, #bbb, #000); background-image: -moz-linear-gradient(top, #bbb, #000); background-image: -ms-linear-gradient(top, #bbb, #000); background-image: -o-linear-gradient(top, #bbb, #000); background-image: linear-gradient(top, #bbb, #000);

4. CSS3 के रूपांतरण

पुराने ब्राउज़रों में समस्याओं के कारण बहुत लोकप्रिय संपत्ति नहीं है। हालांकि, काफी आशाजनक। आप टूलटिप्स या आकार बना सकते हैं।

 -webkit-transform: perspective(250) rotateX(45deg); -moz-transform: perspective(250) rotateX(45deg); -ms-transform: perspective(250) rotateX(45deg); -o-transform: perspective(250) rotateX(45deg); transform: perspective(250) rotateX(45deg);

5. आपका @ फ़ॉन्ट-चेहरा

आपको पेज पर अपने फोंट जोड़ने की अनुमति देता है। विभिन्न स्वरूपों में परिवर्तित करने के लिए, Font2Web सेवा का उपयोग करना उपयोगी है।

 @font-face{ font-family: 'MyFont'; src: url('myfont.eot'); src: url('myfont.eot?#iefix') format('embedded-opentype'), url('myfont.woff') format('woff'), url('myfont.ttf') format('truetype'), url('myfont.svg#webfont') format('svg'); } h1 { font-family: 'MyFont', sans-serif; }

6. मेटा टैग अनुकूली लेआउट

उत्तरदायी लेआउट के लिए महत्वपूर्ण मेटा टैग सही ढंग से काम करने के लिए

 <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="HandheldFriendly" content="true">

7. एचटीएमएल 5 मीडिया

मीडिया सामग्री के सार्वभौमिक संचालन के लिए कई वीडियो और ऑडियो प्रारूपों को लोड करने का डिज़ाइन ("हमारा है" में स्थान हटाएं)

 <video poster="images/preview.png" width="1280" height="720" controls="controls" preload="none"> <s ource src="media/video.mp4" type="video/mp4"></s ource> <s ource src="media/video.webm" type="video/webm"></so urce> <s ource src="media/video.ogg" type="video/ogg"></s ource> </video> <audio controls="controls" preload="none"> <s ource src="music.ogg" type="audio/ogg"> <s ource src="music.mp3" type="audio/mpeg"> </audio>

8. लेआउट को सरल बनाने के लिए कक्षाएं

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

 .float-left /* Or whatever name you like */ { float: left; } .float-right /* Or whatever name you like */ { float: right; }

या तत्वों को प्रदर्शित करके:

 .hide { display: none; } .show { display: block; }

9. डिजाइन स्निपेट

सामग्री प्रदर्शित करना आसान बनाएं। एक सरल उदाहरण: सीएसएस फ़ाइल में फ़ॉन्ट शैलियों की घोषणा उस स्थान पर निर्भर करती है जहां सामग्री स्थित है। यह प्रतीत होता है कि सरल तकनीक को अक्सर डेवलपर्स द्वारा अनदेखा किया जाता है।

 .content { font: 1em/1.4 Segoe, "Segoe UI", "Helvetica Neue", Arial, sans-serif; } .title { font: 1.7em/1.2 Baskerville, "Baskerville old face", "Hoefler Text", Garamond, "Times New Roman", serif; } .code { font: 0.8em/1.6 Monaco, Mono-Space, monospace; }

10. विकास स्निपेट

स्निपेट्स जो साइट के लेआउट को अधिक सही ढंग से व्यवस्थित करने में मदद करते हैं। यहां एक बहुत ही सरल उदाहरण दिया गया है जो आपको ब्लॉक की चौड़ाई की सही गणना करने की अनुमति देता है:

 *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

एक अन्य उपयोगी उपकरण क्लीयरफिक्स है, जो विभिन्न ब्राउज़रों में लेआउट तत्वों को प्रदर्शित करने में विसंगतियों से छुटकारा पाने में मदद करता है:

 .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; } /* IE6/7 support */ .clearfix { *zoom: 1; }

URL जो बहुत लंबे हैं वे पृष्ठ लेआउट को तोड़ सकते हैं। इससे बचने के लिए, आप निम्न स्निपेट ( css-tricks.com पर अधिक) का उपयोग कर सकते हैं, यह आठवें संस्करण के नीचे ओपेरा और IE में काम नहीं करता है:

 .break { -ms-word-break: break-all; word-break: break-all; word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; } .ellipsis { width: 250px; white-space: nowrap; overflow: hidden; -ms-text-overflow: ellipsis; /* Required for IE8 */ -o-text-overflow: ellipsis; /* Required for Opera */ text-overflow: ellipsis; }

पूर्व टैग में पाठ लपेटें:

 pre { white-space: pre-wrap; /* Chrome & Safari */ white-space: -moz-pre-wrap; /* Mozilla since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ }

11. मुद्रण के लिए पृष्ठ तैयार करना

काले और सफेद में सामग्री का अनुवाद करना, रेखांकन लिंक प्रदर्शित करना, इसके आगे कोष्ठक में URL प्रदर्शित करना:

 @media print { * { background: none !important; color: black !important; box-shadow: none !important; text-shadow: none !important; /* Images, vectors and such */ filter: Gray(); /* IE4-8: depreciated */ filter: url('desaturate.svg#grayscale'); /* SVG version for IE10, Firefox, Safari 5 and Opera */ -webkit-filter: grayscale(100%); /* Chrome + Safari 6 */ -moz-filter: grayscale(100%); /* Future proof */ -ms-filter: grayscale(100%); /* Future proof */ -o-filter: grayscale(100%); /* Future proof */ filter: grayscale(100%); /* Future proof or polyfilled */ } a { text-decoration: underline; } a[href]:after { content: " (" attr(href) ")"; } a[href="#"], a[href="javascript:"] { content: ""; } }

 <!-- SVG version of grayscale filter: desaturate.svg --> <svg version="1.1" xmlns="http://www.w3.org/2000/svg"> <filter id="grayscale"> <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/> </filter> </svg>

प्रयुक्त सामग्री:

बुनियादी शैलियों और उपयोगी सीएसएस स्निपेट्स