Category Archives: HTML and CSS
Блоки произвольной формы с CSS Shapes
http://sarasoueidan.com/blog/css-shapes/index.html Поддержки браузерами пока почти нет.
vw, vh, vmin, vmax
В css можно задавать ширину/высоту в процентах от ширины viewportа. 1vh(vw) = 1% ширины(высоты) vmin/vmax — минимальное/максимальное значение из ширины и высоты. https://developer.mozilla.org/en-US/docs/Web/CSS/length#Viewport-percentage_lengths http://caniuse.com/#search=vh
В Android 4.4 KitKat по умолчанию chrome
http://www.mobilexweb.com/blog/android-4-4-kitkat-browser-chrome-webview Хотя конечно со множеством оговорок и странностей, но браузером по умолчанию будет Google Chrome 30. Главный минус — он не будет обновляться сам, только с обновлением ОС.
Проверка поддержки html5-свойств конкретным браузером
http://html5test.com/ — проверяет поддержку всего, что есть в спецификациях html5, в текущем браузере. Удобно для работы с мобильными браузерами. Удобнее, чем выискивать на http://caniuse.com, а ещё лучше в связке.
Функции анимации по кривым Безье
http://easings.net/ru — хорошо описаны различные функции анимации css-свойств с демонстрацией. animation
Методы тестирования мобильных приложений
http://webuild.envato.com/blog/techniques-for-mobile-and-responsive-cross-browser-testing/
Тестирование на нескольких мобильных устройствах одновременно
Отличный аналог Adobe EDGE — http://vanamco.com/ghostlab/. Отличается тем, что на клиентских устройствах не надо ставить никаких приложений. Есть неплохое описание/сравнение с Adobe EDGE — http://atlantajones.com/blog/adobe-edge-inspect-vs-ghostlab
Пример отладки проблем в отрисовке страницы
http://jakearchibald.com/2013/solving-rendering-perf-puzzles/
Расширенный синтаксис CSS-селекторов
Расширенный синтаксис CSS-селекторов: http://htmlbook.ru/samcss/selektory-atributov, в общем-то, видимо, совпадает с Sizzle (селекторами jquery)
Как правильно работать с Shadow DOM
Как смотреть Google Chrome DevTools → Настройки → General → Show Shadow DOM. Как пользоваться