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 { width: 100%; height: 100%; margin: 0; padding: 0; } .header { width: 100%; height: 100px; background-color: blue; box-sizing: border-box; padding: 0; } .main { position: …
Реализация определения размера устройства в 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(); } } Но при этом есть нюанс использования: включить полноэкранный режим можно только в ответ на действие пользователя. 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/