Basic styles and useful CSS snippets
This article contains useful and “correct” styles and snippets that will help speed up the process of developing the site, as well as optimize the layout.
1. Basic HTML5 design
The main code of any page, to which many developers are not paying enough attention. JQuery 1.8.2 and HTML5shiv are connected for correct display in older browsers.
')
<!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. Reset browser default styles
the same code in different browsers may be displayed differently. Resetting styles will help avoid such problems.
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 gradients
The code below will help crossbrowser to display CSS gradients. It is added to the desired selector, you can use rgba () for transparency.
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 Transform
Not very popular property due to problems in older browsers. However, quite promising. You can make tooltips or shapes .
-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. Your @ font-face
Allows you to add your own fonts to the page. To convert to various formats, it is useful to use the Font2Web service.
@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 tags for responsive layout
Important meta tags for responsive layout
<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. HTML5 media
Design of loading multiple video and audio formats for universal work of media content (to remove the space in “s ource”)
<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. Classes to simplify layout
The following snippets will help to reduce syntax during layout. The technique is widely used in various CSS frameworks. For example, managing the float property:
.float-left /* Or whatever name you like */ { float: left; } .float-right /* Or whatever name you like */ { float: right; } Or the display of elements:
.hide { display: none; } .show { display: block; } 9. Design Snippets
Make it easy to display content. A simple example: an ad in a CSS file of font styles depending on the place on the site where the content is located. This seemingly simple technique is often ignored by developers.
.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. Development snippets
Snippets that help more intelligently organize the layout of the site. Here is a very simple example that allows you to correctly read the width of a block:
*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } Another useful tool is clearfix, which helps to get rid of inconsistencies in the display of layout elements in different browsers:
.clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; } /* IE6/7 support */ .clearfix { *zoom: 1; } Too long URLs can break page layout. To avoid this, you can use the following snippet (more on css-tricks.com ), does not work in Opera and IE below the eighth version:
.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; } Text breaks in the pre tag:
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. Preparing a page for printing
Translate content in black and white, display underlining links, display URLs next to brackets:
@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> Used materials:
Source: https://habr.com/ru/post/159101/
All Articles