Category Archives: HTML and CSS

Вёрстка писем

Всё время радуюсь, что я не верстаю письма. Видимо, надо делать свой фреймворк для этого. Пара ссылок для начала. http://m.habrahabr.ru/company/pechkin/blog/262585/ http://m.habrahabr.ru/post/262427/ http://m.habrahabr.ru/company/pechkin/blog/263699/

Фигуры на css borders

https://css-tricks.com/examples/ShapesOfCSS/

Просто про SVG-спрайты

http://www.youtube.com/watch?v=tlUoASUKyd8 Online-генерилка спрайтов — https://icomoon.io/

Css: высота элемента в 100% — 100px

Да, calc-ом оно делается ровно так (100%-100px). Но его не все браузеры до сих пор умеют, так что вот ещё один способ:

<body>
<div class="header"></div>
<div class="main"></div>
</body>

<body>

</body>

body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

.header {
	width: 100%;
	height: 100px;
	background-color: blue;
	box-sizing: border-box;
	padding: 0;
}

.main {
	position: absolute;
	top: 100px;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: red;
}

body {

width: 100%;

height: 100%;

margin: 0;

padding: 0;

}

.header {

width: 100%;

height: 100px;

background-color: blue;

box-sizing: border-box;

padding: 0;

}

.main {

position: absolute;

top: 100px;

right: 0;

bottom: 0;

left: 0;

background-color: red;

}

Реализация определения размера устройства в AngularJS

Идея описана здесь — https://blog.bullgare.com/2013/12/%D0%BE%D0%BF%D1%80%D0%B5%D0%B4%D0%B5%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5-%D1%82%D0%B8%D0%BF%D0%B0-%D1%83%D1%81%D1%82%D1%80%D0%BE%D0%B9%D1%81%D1%82%D0%B2%D0%B0-%D0%B2-js-%D1%87%D0%B5%D1%80%D0%B5%D0%B7-media/. Т.е. через media-queries задавать параметры, которые определят размеры устройства, по этим параметрам менять z-index. Затем создать в js-файле такой элемент скрытым и считывать его z-index в любой момент. Особенно это удобно делать в css-препроцессорах, чтобы параметризовать параметры media-queries. Тогда изменения внешнего вида сайта через css будут происходить одновременно с изменением …

Pure.css — ещё один css-фреймворк

https://github.com/yahoo/pure/ Достаточно удобный, простой, производительный, от yahoo. Одно смущает — написан на чистом css, без использования препроцессоров.

Кратко про создание мобильных приложений из single page application

http://bunsch.pl/2014/09/21/buiding-offline-mobile-html5-apps/

Chrome Fullscreen API

Всё сводится к вызову:

function launchIntoFullscreen(element) {
  if(element.requestFullscreen) {
    element.requestFullscreen();
  } else if(element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if(element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen();
  } else if(element.msRequestFullscreen) {
    element.msRequestFullscreen();
  }
}

function launchIntoFullscreen(element) {

if(element.requestFullscreen) {

element.requestFullscreen();

} else if(element.mozRequestFullScreen) {

element.mozRequestFullScreen();

} else if(element.webkitRequestFullscreen) {

element.webkitRequestFullscreen();

} else if(element.msRequestFullscreen) {

element.msRequestFullscreen();

}

Но при этом есть нюанс использования: включить полноэкранный режим можно только в ответ на действие пользователя. http://davidwalsh.name/fullscreen http://stackoverflow.com/questions/7836204/chrome-fullscreen-api

schema.org для отображения сайта в поисковиках

Как помочь поисковику правильно распарсить и потом отобразить сайт в выдаче. http://schema.org/docs/documents.html Авторазметка от google: https://www.google.com/webmasters/markup-helper/?hl=ru Внятная инструкция: https://support.google.com/webmasters/topic/4598337?hl=ru&ref_topic=3309300 Проверить как работает разметка: https://developers.google.com/webmasters/structured-data/testing-tool/ http://habrahabr.ru/company/google/blog/178877/ http://habrahabr.ru/company/yandex/blog/190760/

Лоадеры и прогрессбары в стиле google material design

Css-лоадеры в стиле http://lightningtgc.github.io/MProgress.js/