В процессе верстки очередного проекта наткнулся на странный баг в Firefox свежих версий, которые поддерживают свойство backface-visibility. Ранее описание этой проблемы не встречал, поэтому решил поделиться. Полезно будет всем, кто прочел этот пост об антиалиасинге под Windows и начал использовать эти советы.Читать полностью »
Рубрика «css» - 130
Баг с position:fixed и backface-visibility в Firefox
2013-03-06 в 9:51, admin, рубрики: css, Firefox, web-fonts, web-разработка, браузеры, Веб-разработка, метки: css, firefox, web-fonts, web-разработка, браузерыПроизвольный вид поля file в html-форме, одинаковый во всех браузерах
2013-03-05 в 16:10, admin, рубрики: css, html, javascript, загрузка файлов, стилизация, Формы ввода, метки: загрузка файлов, стилизация, Формы ввода Не смотря на развитие, внедрение новых стандартов и плюшек в браузерах, у нет единых стандартов, как отображать элемент /> по умолчанию. Более того, у этого элемента нет атрибутов, позволяющих его в какой-то мере стилизовать.
Из-за необходимости привести это поле формы к единому виду во всех браузерах и «вписать» в разработанный дизайн, после поисков и анализа материалов в интернете был разработан метод замены вида поля формы на html+css, и js для расширения функциональности.
Как по умолчанию выглядит это поле?
Комбинирование адаптивной верстки и шаблонов для мобильных
2013-03-05 в 13:14, admin, рубрики: css, html, mobile web, responsive design, адаптивная вёрстка, адаптивный дизайн, веб-дизайн, Мобильный веб, мобильный интерфейс, переводы, метки: css, html, mobile web, responsive design, адаптивная вёрстка, адаптивный дизайн, мобильный интерфейс, переводыСтатья является переводом отличного, вдохновляющего, хоть и небольшого поста Mixing Responsive Design and Mobile Templates от одного из создателей CodePen, Криса Койера.
Итак, вы заняты стратегической проработкой поведения своего сайта для мобильных устройств. По идее вам надо бы выбрать что-то одно — или адаптивный дизайн, или создание отдельного сайта для мобильных. Что ж, возможно, это не так. Может быть, вам удастся сочетать сразу несколько стратегий. Читать полностью »
Полезные техники HTML, CSS и JavaScript
2013-03-05 в 13:01, admin, рубрики: css, html, JS, Веб-разработка, перевод, переводы, метки: css, html, перевод 
Техника – это способ справиться с заданием, и у нас, разработчиков и дизайнеров фронтэнда, этих способов бывает достаточно много. При это, будучи погруженными в рутинную работу, мы порой не всегда замечаем как стремительно меняется окружающая нас сфера. В период с 2002 по 2010 годы сообщество фронтэнд-разработчиков буквально покрывалось язвами избыточного кода и ресурсов, от которых страдали и работа сайтов, и удобство их использования. Чтобы с этим справиться, мы придумали уйму хаков, трюков и уловок под кодовым названием «техника». Мы по-прежнему продолжаем выполнять поставленные перед нами задания, просто используем не самые эффективные способы.
Оборачиваясь назад, отметим, что в последние несколько лет установились новые, лучшие, стандарты и способы их применения, позволяя нам создавать более продвинутые «техники». Этот новый мир, открытый перед нами, называется «modern web». Web 2.0, которым восхищались в свое время, сегодня для нас стал запутанным и застойным. С одной стороны нет сомнений в том, что подобная судьба постигнет и то, что мы называем «modern web». С другой — пока что мы можем использовать этот термин и злоупотреблять им сколько угодно, пока понимаем, что он означает.
В 2010 появился стандарт HTML5, обеспечивающий совершенно новую, полустандартизованную веб-среду. Такие браузеры, как Opera, Firefox, Chrome и Safari приняли нововведения, и их разработчики вышли за пределы реализации стандартов и изучения интерфейса программирования приложений. Чтобы представить себе, насколько автономны эти браузеры, можно ознакомиться с отличной наглядной демонстрацией поддержки HTML5 на www.html5readiness.com.
Читать полностью »
Грузим много CSS для IE в режиме разработки
2013-03-04 в 10:08, admin, рубрики: css, internet explorer, javascript, метки: Internet ExplorerВ Островке при разработке сайта используется модульная структура. Логические элементы состоят из разметки, стилей и javascript-файлов.
После перехода на такую структуру, пару месяцев все было хорошо. Потом в IE начали пропадать стили из разных блоков, и мы осознали, что столкнулись с проблемой всех крупных проектов – в IE9 и младше не грузится больше 31го css файла разом.
Читать полностью »
Объектно-ориентированный дизайн… в CSS
2013-03-03 в 16:39, admin, рубрики: css, javascript, Веб-разработка Предупрежу заранее, что я совершенно не считаю себя экспертом HTML/CSS/JS. Но, как архитектору, мне всегда была интересна организация и систематизация кода в самых разных его проявлениях, в том числе и представленных в виде CSS. Особенно сильно этот интерес был подогрет БЭМом, при первом знакомстве с которым подсознание отреагировало когнитивным дискомфортом. А поскольку БЭМ-стиль в проектах у меня стал появляться все чаще, я почувствовал острую необходимость осмыслить, наконец, свое отношение к организации стилей. Таким образом и появился данный топик-размышление, топик-дискуссия. Я понимаю, что взялся за пограничную задачу, поскольку далеко не всем верстальщикам знакомы тонкости объектно-ориентированного дизайна, а большинство архитекторов не написали ни одного CSS-стиля. И, как результат, мне пришлось неуклюже балансировать, чтобы было понятно всем. Но 'этот риск еще больше подогрел мой интерес к теме :)
Читать полностью »
Дайджест интересных новостей и материалов из мира айти за последнюю неделю №46 (23 февраля — 1 марта 2013)
2013-03-01 в 20:12, admin, рубрики: css, css3, emmet, Firefox OS, html, html5, ie10, jquery, JS, Блог компании Zfort Group, браузеры, веб-дизайн, Веб-разработка, дайджест, Интересное, Новости, ресурсы, ссылки, ссылки на сми, метки: css, css3, emmet, Firefox OS, html, html5, ie10, jquery, yandex store, браузеры, веб-дизайн, Веб-разработка, дайджест, интересное, новости, ресурсы, ссылки, ссылки на смиПредлагаем вашему вниманию очередную подборку с ссылками на новости, интересные материалы и полезные ресурсы.
.png "Дайджест интересных новостей и материалов из мира айти за последнюю неделю №46 (23 февраля — 1 марта 2013)")
Свой собственный CSS – фреймворк
2013-03-01 в 19:30, admin, рубрики: css, framework, метки: css, frameworkВы используете CSS — фреймворк?
Для тех, кто использует CSS — фреймворк в своей работе, прошу поделиться своим опытом в комментариях, будет очень полезно и интересно.
CSS — фреймворк — это заранее подготовленный набор HTML и CSS — файлов. Идея в том, чтобы при создании каждого нового проекта использовать этот готовый набор файлов, в которых для вас уже создан макет, задано шрифтовое оформление и написан весь основной код, общий для большинства сайтов. Я использую собственный CSS — фреймворк, он очень простой, идея взята из книги «CSS ручной работы», применяю его всякий раз, когда приступаю к реализации нового проекта.
Я покажу вам код каждого CSS — файла.
Можно также использовать готовый CSS — фрейворк, например: 960 Grid System или Blueprint. Если вы используете готовый фреймворк, то существует опасность того, что в вашем коде будет много ненужного хлама. Который вы не будете использовать в своем проекте. В любом случае выбор за вами какой фреймворк использовать, я делюсь только своим опытом работы и вариантом который, для меня больше подходит. Читать полностью »
Пример — часы на СSS3 без изображений и JavaScript
2013-02-28 в 0:45, admin, рубрики: css, css3, CSS3 animation, css3 transform, html, Веб-разработка, демонстрация, метки: css3, CSS3 animation, css3 transform, демонстрация 
Это статья о том, как был сделан демонстрационный пример Wall Clock in Pure CSS3. Изначально, я предполагал написать данную статью в виде пошагового учебного пособия, но в процессе я понял, что такой пример мало для этого подходит. Потому я решил остановиться только на деталях, которые, на мой взгляд, наиболее интересны, а реализацию остального можно посмотреть и в коде.
Для начала собственно сам пример — на codepen.io или на cssdesk.сom
Вышел Emmet v1.0
2013-02-24 в 20:07, admin, рубрики: css, emmet, html, zen coding, Веб-разработка, метки: css, emmet, html, zen codingРад сообщить, что после более полугода разработки в свет вышел Emmet (бывший Zen Coding) v1.0.
Emmet — это инструмент для ускорения работы с HTML и CSS. В основе проекта лежит механизм динамических аббревиатур, которые разбираются «на лету» и из которых генерируется готовый фрагмент кода. Для написания аббревиатур используется синтаксис, похожий на CSS-селекторы, но с некоторыми дополнениями, специфическими для создания кода. Например, вот такая аббревиатура:
section>h2+ul.nav>li.nav-item$*5>aпростым нажатием клавиши превращается в:
<section>
<h2></h2>
<ul class="nav">
<li class="nav-item1"><a href=""></a></li>
<li class="nav-item2"><a href=""></a></li>
<li class="nav-item3"><a href=""></a></li>
<li class="nav-item4"><a href=""></a></li>
<li class="nav-item5"><a href=""></a></li>
</ul>
</section>