Css хак

reset.css — что он делает и как его использовать

Первым появился файл reset.css. Этот css файл содержит в себе перечисление всех возможных html тегов, и сбрасывает их значение на ноль. То ест убирает все возможные отступы, делает шрифт одинаковым во всех тегах, сбрасывая все стили текста. Так что все заголовки и абзацы отображаются простым текстом, одним размеров и без отступов. В результате получаем сброс стилей по умолчанию во всех браузерах.

Работает это так, сначала на странице подключаем файл reset.css, и уже после него свой файл со стилями. В итоге мы сначала сбрасываем все стили, и уже потом в style.css задаем оформление html тегам. Таким образом мы достигаем того что все браузеры сбросят свои стили по умолчанию, и вся разметка будет основываться на тех стилях которые мы зададим в style.css.

Скачать reset.css

Скачать reset.css можно на сайте cssreset.com

Или можете скачать версию Eric Meyer’s “Reset CSS” 2.0 по кнопке ниже, с моего блога:

Список CSS хаков

Ниже приведен список всевозможных хаков для браузеров IE6, IE7, IE8, FireFox, Opera, Safari

Список CSS хаков

/* хак только для  IE8 Only */.myClass  {      color:red\0/; /* красный */     padding:70px\0/; /* отступ 70px только для Internet Explorer 8 */}/* IE 6 Only */* html .myClass {	...} /* All except IE6 standards */.myClass { 	property /**/: value; } /* Firefox & IE 7, и выше */html>body .myClass {    ...}/* Modern browsers only (not IE 7) */html>/**/body .myClass {	...}/* IE 7 Only */*:first-child+html .myClass {   ...}/* Firefox Only */@-moz-document url-prefix() {	.myClass {		...	}}/* IE7 Only */div .myClass2 { 	...}/* IE7 only */*+html .myClass { 	...} /* hack for Opera <=9 */html:first-child .myClass {	...} /* Firefox, Opera, Konqueror, Safari */*|html .myClass { 	...}/* IE8 beta 2 only (?)*/html:first-child .myClass  { 	...} /* IE5/Mac only *//*\*//*/ .myClass { property: value; } /**/ /* Gecko only */.myClass:not() { 	...} /* Opera < 9.5 only */@media all and (min-width: 0px) { 	html:first-child .myClass { 		...	} } /* Safari only */.myClass:not(:root:root) { 	...} /* Safari 3.0 and Chrome only */@media screen and (-webkit-min-device-pixel-ratio:0) {    .myClass {             ....    }}

CSS для Explorer

<!--> 	... если Internet Explorer ..	<link href="ie-fix.css" type="text/css" rel="stylesheet"> <!--> <!--> 	... если IE6 <!--> <!--> 	... если IE7<!--> <!--> 	... если IE5+<!--> <!--> 	.. если ниже IE 6<!--> <!--> 	... если ниже или равно IE 5.5 <!--> <!--> 	... если выше IE 6 <!-->

Полупрозрачность фона в IE, Firefox, Opera

.myClass {	background-color:#000;		-moz-opacity:.82; /* Firefox */ 	opacity:.82; /* Opera */	filter:alpha(opacity=82); /* IE */}

CSS-хаки для браузера Opera

1234	@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio) {   .style {background #F00;}}

123	*|htmlxmlns*=»» .style {   background #F00;}

12345

html:first-child .style {   background #F00;}/* код валидный *//* только для Opera < 9.5 */

CSS-хаки для браузера Internet Explorer 6

1234	.style {   _background #F00;}/* код валидный */

Несмотря на то, что принимает хак с подчеркиванием за ошибку,

спецификация CSS 2.1 использовать данную конструкцию.

1234	* html .style {   background #F00;}/* код валидный */

CSS-хаки для браузера Internet Explorer 7

1234	*+html .style {   background #F00;}/* код валидный */

1234	*:first-child+html .style {   background #F00;}/* код валидный */

123	html>body .style {   *background #F00;}

123	.style {   background #F00\/;}

Этот хак следует писать после стилей для остальных браузеров.

CSS-хаки для браузера Safari

1234	body:last-childnot(:rootroot) .style {   background #F00;}/* для Safari < 4.0 */

1234	htmlxmlns*=»» body:last-child .style {   background #F00;}/* для Safari < 4.0 */

Адаптивность сетки

Эти стили не претендуют на мисс-верстка 2017, но зато покажут вам, как сделать нашу masonry-сетку адаптивной, + несколько вендорных префиксов для максимальной совместимости с браузерами:

body {
    font: 1em/1.67 'Open Sans', Arial, Sans-serif;
    margin: 0;
    background: #e9e9e9;
}

.wrapper {
    width: 95%;
    margin: 3em auto;
}

.masonry {
    margin: 1.5em 0;
    padding: 0;
    -moz-column-gap: 1.5em;
    -webkit-column-gap: 1.5em;
    column-gap: 1.5em;
    font-size: .85em;
}

.item {
    display: inline-block;
    background: #fff;
    padding: 1em;
    margin: 0 0 1.5em;
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-shadow: 2px 2px 4px 0 #ccc;
}

@media only screen and (min-width: 400px) {
    .masonry {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
    }
}

@media only screen and (min-width: 700px) {
    .masonry {
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
    }
}

@media only screen and (min-width: 900px) {
    .masonry {
        -moz-column-count: 4;
        -webkit-column-count: 4;
        column-count: 4;
    }
}

@media only screen and (min-width: 1100px) {
    .masonry {
        -moz-column-count: 5;
        -webkit-column-count: 5;
        column-count: 5;
    }
}

@media only screen and (min-width: 1280px) {
    .wrapper {
        width: 1260px;
    }
}

Используя данные стили, я подразумевал, что наш блок с классом masonry будет находиться еще и внутри блока с классом wrapper, для будущих структурных изысканий. Таким образом финальный html будет выглядеть у нас вот так:

<html>
  <head>
    <title>CSS-only masonry grid</title>
  </head>
  <body>
    <div class="wrapper">
      <div class="masonry">
         <div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
         <div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
         <div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
         <div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
         <div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
         <div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
         <div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
         <div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
        <div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
      </div>
    </div>
  </body>
</html>

А итоговый результат можете оценить на Codepen.io:

Чрезмерная точность

Селекторы бывают не только слишком общими, но ещё и слишком специфичными — два конкретно запарных случая. Чрезмерно специфичные селекторы порождают ещё более специфичные селекторы. Каждый последующий из них становится препятствием при изменении стилей элемента, что в конце концов приводит к хрупким таблицам стилей, с которыми никто не хочет работать.

В CSS есть встроенная специфичность — порядок (очередь) resultset’ов. Это каскад в каскадных таблицах стилей. Исходя из этого, можно выдавать resultset’ы в порядке возрастания по их значимости, без увеличения уровня специфичности селектора. Например:

В этом примере каждый последующий классовый селектор более специфичен, чем предыдущий, таким образом устраняется необходимость объявлять стили для .

Запомните: используйте единичные классовые селекторы везде, где только возможно, записывайте их в порядке возрастания значимости и избегайте образования хрупких таблиц стилей.

CSS хаки для IE8

IE8 уже довольно хорошо поддерживает стандарты W3C, однако и в нем иногда приходится использовать хаки, чтобы устранить некоторые погрешности.

Хак с применением идентификаторов

Если в таблице стилей поставить рядом (без пробелов) два идентификатора, то согласно синтаксиса CSS это будет означать, что мы хотим применить стили к HTML-элементу, который содержит оба этих идентификатора одновременно. Но синтаксис HTML не предусматривает наличие у одного элемента сразу двух идентификаторов (в отличие от классов), поэтому по логике вещей такое указание браузерам надо игнорировать. И IE8 с этим согласен, то есть он воспринимает такое указание, как ошибку, а вот остальные браузеры — нет.

А теперь о самом хаке. Если в CSS указать нужный селектор, а через запятую от него слитно написать два идентификатора, то IE8 не воспримет подобные стили и пропустит все, что находится в скобках. Таким образом можно создавать CSS, который поймут все браузеры кроме восьмого Эксплорера.

Синтаксис:

селектор, #идентификатор1#идентификатор2 { стили CSS }

Валидация: да.

Пример HTML и CSS: хак для IE8 с идентификаторами

Улучшить интерфейс сайта или приложения

Сервисы для работы с внешним видом интерфейса проекта: анимация элементов, настройка блоков навигации.

Коллекция решений для интерфейса CodyHouse Framework

Библиотека компонентов HTML, CSS, JavaScript для оформления интерфейса сайта. Все предложенные решения легкие, не требуют переопределения существующих правил CSS и адаптированы под мобильные.

В коллекции есть варианты для интересной настройки фона, оформления кнопок, меню, иллюстраций, веток комментариев, навигации, статей и других элементов, плагины для карусели и слайдшоу.

Интерфейс каталога

Элементы можно отредактировать, к примеру, заменить цветовое оформление и изображения. На страницах сайта есть подробное объяснение для установки и редактирования элементов. Как установить фреймворк Есть много бесплатных вариантов, платные доступны в Pro-версии, она стоит 89 долларов в год

Улучшенный MV-фреймворк JSBlocks beta

В работе над простым или сложным приложением с анимациями разработчики используют фреймворки. Эти платформы позволяют упростить работу и автоматизировать часть действий, чтобы сэкономить силы и допускать меньше ошибок.

Обычно фреймворки обрабатывают только клиентскую часть, но есть платформа JSBlocks beta — комплексный улучшенный фреймворк, который работает еще и с базами данных и службами.

JSBlocks beta данных подходит для создания проектов любой сложности — простых пользовательских интерфейсов и комплексных приложений, за это отвечает модуль jsblocks MVC (Model-View-Collection). Примеры проектов на GitHub: TodoMVC и E-shopping.

Код запросов пишется на HTML, так что не надо изучать новый синтаксис. JSBlocks beta легко освоить, для использования достаточно скопировать и вставить код элемента, продолжить работу с документацией и стартовым шаблоном. Есть API.Как работать в JSBlocks beta: обучение.

Product Tour — отзывчивый тур по сайту или приложению для пользователей

Перед покупкой программы или сервиса пользователь ищет информацию: что его ждет после приобретения, какие функции доступны, как выглядит интерфейс, как этим пользоваться. На основе найденного он будет решать, стоит ли вообще делать покупку.

Лучший способ познакомить пользователя с продуктом — наглядно показать, как он работает. При этом может быть недостаточно просто записать гифку с тем, как вы кликаете по разделам приложения — часто нужны подписи, пояснения и возможность поставить демонстрацию на паузу.

Для этой цели существует Product Tour — инструмент для создания пошагового руководства по использованию сайта или приложения. Он реализован с помощью CSS и JQuery, подстраивается под размер устройства пользователя.

Пример механики демонстраций

Демонстрационный мини-тур с кликабельными подсказками.

CSS хаки для IE8

IE8 уже довольно хорошо поддерживает стандарты W3C, однако и в нем иногда приходится использовать хаки, чтобы устранить некоторые погрешности.

Хак с применением идентификаторов

Если в таблице стилей поставить рядом (без пробелов) два идентификатора
, то согласно синтаксиса CSS это будет означать, что мы хотим применить стили к HTML-элементу, который содержит оба этих идентификатора одновременно. Но синтаксис HTML не предусматривает наличие у одного элемента сразу двух идентификаторов (в отличие от классов), поэтому по логике вещей такое указание браузерам надо игнорировать. И IE8 с этим согласен, то есть он воспринимает такое указание, как ошибку, а вот остальные браузеры — нет.

А теперь о самом хаке. Если в CSS указать нужный селектор, а через запятую от него слитно написать два идентификатора, то IE8 не воспримет подобные стили и пропустит все, что находится в скобках. Таким образом можно создавать CSS, который поймут все браузеры кроме восьмого Эксплорера.

Синтаксис:

селектор, #идентификатор1#идентификатор2 { стили CSS }

Валидация:
да.

Пример HTML и CSS: хак для IE8 с идентификаторами

seodon.ru — CSS хаки для IE

Альтернативы

Префиксы браузера

У каждого из самых популярных движков рендеринга браузера есть собственный префикс поставщика для экспериментальных свойств. Однако из-за увеличения числа этих свойств в реальном коде разработчики браузеров начали отходить от этого в пользу флага функции.

Список префиксов

Ниже приводится список префиксов из различных механизмов компоновки:

Префикс поставщика	В использовании	Layout Engine	Сделано	Использован
	да	Форматировщик	Антенный Дом	Форматтер антенного дома
	да	WebKit	Apple Inc.	Apple Safari 2.0, Виджеты Opera,
			Стандарты Комитета передовых телевизионных систем
	да	WebKit	Рабочая группа EPUB	Хром / Гугл Хром, Браузеры на основе WebKit
	да		Sun Microsystems (теперь приобретено Корпорация Oracle)	JavaFX Приложения
			Hewlett Packard (сейчас же HP Inc. и Hewlett Packard Enterprise)
	Да / да	KHTML / WebKit	KDE	KDE Konqueror / Apple Safari 1.1 — Safari 2.0, браузеры на основе WebKit (как устаревший префикс)
	да	Геккон	Фонд Mozilla	Браузеры на основе Gecko , Mozilla Firefox
	да	Трезубец / MSHTML	Корпорация Майкрософт	Microsoft Internet Explorer
		Офис	Корпорация Майкрософт	Microsoft Office
	да	Престо	Программное обеспечение Opera	Браузер Opera для настольных ПК до версии 12.16, опера мини, и Opera Mobile до версии 12.1, Nintendo DS & Nintendo DSi Браузер, Интернет-канал Nintendo Wii
	да	Принц	ДаЛогика	YesLogic Prince
		WebKit	BlackBerry Limited	Браузер RIM Blackberry
	да	МАРТА	Реальные объекты	Реальные объекты PDFreactor
			Высокие компоненты	Высокие компоненты
	да	Престо	Форум WAP	Браузер Opera для настольных ПК и Opera Mobile, WAP-форум
	да	WebKit / Blink	Apple Inc. (WebKit) / Google Inc. (Blink)	Apple Safari и Safari для iOS (WebKit), Chromium / Google Chrome для ПК и мобильных устройств (Blink), Opera для ПК и мобильных устройств начиная с версии 14 (Blink), браузер Android (Blink), Nokia Браузер MeeGo 8.5, Nokia Symbian Браузер 7.0 и новее (WebKit), Blackberry Browser 6.0 и новее (WebKit).
	Нет	Престо	Программное обеспечение Opera	Браузер Opera Desktop для Windows 2000 / XP

Пример

/ * Кроссбраузерный css3 linear-gradient * /.линейный градиент {  / * Браузер Gecko (Firefox) * /  фоновая картинка -моз-линейный градиент(верх, # D7D %, #068 100%);  / * Опера * /  фоновая картинка -о-линейный градиент(верх, # D7D %, #068 100%);  / * старый синтаксис Webkit * /  фоновая картинка -webkit-градиент(линейный, оставили верх, оставили Нижний,    цвет-остановка(, # D7D), цвет-остановка(1, #068));  / * Webkit (Safari, Chrome, iOS, Android) * /  фоновая картинка -webkit-линейный градиент(верх, # D7D %, #068 100%);  / * W3C * /  фоновая картинка линейный градиент(к Нижний, # D7D %, #068 100%);}

Ограничение.

Префиксы поставщиков были разработаны для функций, которые находились в стадии разработки, а это означает, что синтаксис может быть даже не окончательным. Кроме того, добавление правила для каждой реализации функции в браузере плохо масштабируется, если вы хотите поддерживать множество браузеров. Следовательно, основные поставщики браузеров отходят от префиксов поставщиков в пользу других методов, таких как запросы функций.

Удаление функции.

Обнаружение функции JavaScript

Существует несколько библиотек JavaScript, которые определяют, какие функции доступны в конкретном браузере, чтобы правила CSS могли быть написаны для них. Такие библиотеки, как Modernizr, добавляют классы в элемент, позволяющий использовать правила CSS, такие как .

В CSS3 была введена новая функция, известная как запросы функций, позволяющая обнаруживать определенные функции в CSS (без необходимости использования библиотеки JavaScript для обнаружение функции). Эту новую директиву можно использовать для проверки поддержки или отсутствия поддержки определенной функции, а проверки можно комбинировать с , , и . Очевидно, правила будут работать только в браузерах, поддерживающих .

заголовок {    отображать блокировать;}@поддерживает (отображать Flexbox) {    заголовок {        отображать Flexbox;    }}

Полифиллы скрипта

Хотя обнаружение функций JavaScript и правила могут помочь настроить таргетинг на браузеры, которым требуется резервная функция, они не будут устранять ошибки в определенных браузерах или включать эти расширенные функции. Полифиллы, сценарии, обеспечивающие единообразие поведения во всех браузерах, можно использовать для добавления поддержки новых правил CSS (например, медиа-запросы в IE 8), а также исправлять ошибки в определенных браузерах. Поскольку полифиллы добавляют или исправляют функциональные возможности в браузерах, в которых их нет, они служат другой цели, чем запросы функций, но могут использоваться в сочетании с ними.

• Сравнение движков веб-браузеров (поддержка CSS)
• Условные комментарии

Отрисовать дизайн сайта или приложения

Интересные решения для оформления: дизайнерские иконки, подбор цветов и стилей.

След от курсора

Креативный разработчик и 3D-дженералист Натан Гордон поделился своей разработкой — фреймворком OGL. Это библиотека кодов WebGL, которая избавляет от необходимости писать сложные коды вручную. Библиотека легкая, например, классы OGL, которые нужны для этого эксперимента, в сжатом виде весят 13kb.

С помощью этой библиотеки можно настроить анимационный след от курсора мыши, которой пользователь водит по вашему сайту. Это не сделает сайт удобнее, но у сайта появится интересная фишка. Пользователи наверняка залипнут на странице, играя с курсором, так что увеличится время сеанса и улучшатся поведенческие факторы.

Пример реализации на сайте deplacemaison.com

Не перестарайтесь с анимациями и украшениями на странице — если скорость загрузки сайта значительно увеличится, пользователи не будут долго ждать и уйдут.

Деформация надписи или фона

По такому же принципу, как работает интерактивный след от курсора, можно настроить деформирование фона или надписи курсором мыши. Цель такая же — заинтересовать пользователя, чтобы он какое-то время играл с надписью или фоном, задержать его на сайте и запомниться интересной фишкой.

В этом примере настроили неподвижный фон и деформирование надписи от движений курсора:

Демонстрационный пример

Полезная подборка CSS хаков

Варианты на сайте оформлены в удобных окошках: можно сразу посмотреть результат и скопировать варианты в HTML, SCSS, JS.

Демонстрация интерактивных кнопок

Определение цветов по картинке

На страницах tympanus.net разработчики поделились собственным экспериментом — инструментом Color Extraction Effect для определения цветовой гаммы с картинки. Он сканирует картинку, определяет все ее цвета и из них выбирает небольшую палитру удачно сочетающихся друг с другом оттенков.

Демонстрация работы

Инструмент использует Vibrant.js от Jari Zwarts для извлечения цветов из изображений.

Бесплатный набор иконок для фитнес-проекта

Дизайнер Jacek Janiczak выложил набор иконок, который он разработал под фитнес-проект, с разрешением использовать их в коммерческих целях. Иконки хоть и сделаны для фитнес-тематики, но выглядят вполне универсально.

Демонстрация иконок из набора

Бесплатный набор иконок в разных цветах

В наборе 48 иконок в разных цветовых вариациях, в сумме получается 144 значка. Иконки можно редактировать и использовать для личных и коммерческих проектов.

Демонстрация набора

Бесплатный сет иконок Smart House на Dribbble

Аккуратный и лаконичный набор иконок «Умный дом», который сделал дизайнер Roman Malashkov. Бесплатная для личного и коммерческого использования лицензия. В пакете 24 иконки для бытовых приборов и других обозначений по теме.

Примеры доступных иконок

Бесплатный пак стикеров по «Игре престолов»

Дизайнер Alex Kunchevsky поделился набором из четырех красочных стикеров по сериалу «Игра престолов». Он разрешил использовать их в личных или коммерческих проектах, так что вы можете их напечатать или разместить на сайте, баннере или в приложении.

Стикеры из набора

Расскажите, какую подборку инструментов, идей или шаблонов вам было бы интересно увидеть в блоге?

Составила Маргарита Морозова, обновила Елена Жмурина

Типы взломов [ править ]

Неверный или несовместимый CSS

Из-за причуд в интерпретации CSS различными браузерами, большинство хаков CSS связано с написанием недопустимых правил CSS, которые интерпретируются только определенными браузерами, или полагаясь на ошибки в определенных браузерах. Примером этого является добавление к правилам префикса подчеркивания (как в ) для целевого Internet Explorer 6 — другие браузеры будут игнорировать строку, позволяя использовать ее для написания кода, специфичного для одного браузера.

Неподдерживаемый CSS

Хотя новые правила CSS верны по текущим стандартам, они игнорируются старыми браузерами как «недействительные». Написав старые правила, за которыми следуют новые правила, отменяющие или изменяющие старые, можно активировать только определенные правила в старых браузерах.

Условные комментарии

До версии 10 Internet Explorer поддерживал специальный синтаксис комментариев, который позволял читать блоки HTML только определенным версиям браузера. Эти комментарии в основном используются для предоставления конкретных обходных путей CSS и JavaScript для старых версий браузера. Никакие другие браузеры не интерпретировали эти комментарии и не предлагали аналогичные функции.

Ниже приведены примеры различного синтаксиса этих комментариев.

< head > 
  < title > Тест </ title > 
  < link  href = "all_browsers.css"  rel = "stylesheet"  type = "text / css" > 
  <! - > <link href = "ie_only.css "rel =" stylesheet "type =" text / css "> <!  -> 
  <! - > <link href =" ie_6_and_below.css "rel =" stylesheet "type =" text / css "> <!  -> 
  <! - > <! ]>  < link  href = "Recent.css "  rel = " stylesheet "  type = " text / css " > <! - <!  -> 
  <! -  ->  < link  href = "not_ie.css"  rel = "stylesheet"  type = "text / css" >  <! - <!  -> 
</ head >

Критики

Скрытие кода с помощью хаков часто приводит к некорректному отображению страниц при обновлении браузеров. Эти взломы могут привести к неожиданному поведению в новых браузерах, которое может интерпретировать их иначе, чем их предшественники. С тех пор, как Internet Explorer 6 и 7 вышли из употребления, сократились и хаки CSS. Современные методы нацеливания на функции менее уязвимы и подвержены ошибкам.

Создать прототип сайта

Бесплатные сервисы для создания прототипа сайта перед отрисовкой дизайна и программированием

Создание прототипов в Figma

Известный бесплатный инструмент для отрисовки наглядных интерактивных прототипов страниц сайта.

Позволяет создавать прототип с адаптивной сеткой для просмотра на мобильных, настраивать внутреннюю перелинковку между шаблонами страниц, сделать разворачивающиеся списки, попапы, настроить анимацию на блоки и внедрить другие фишки, с которыми прототип выглядит как настоящий сайт.

Настройка всплывающего окна заявки

Клиент может прямо на прототипе оставлять комментарии к элементам.

Создание прототипов в Lucidchart

Lucidchart — инструмент для создания диаграмм, блок-схем, алгоритмов, диаграмм кадров организации, планировок этажей, диаграмм Венна, SWOT-анализов и макетов сайтов, так что он подходит и для прототипирования сайтов и приложений. Полный список инструментов.

Фрагмент демонстрационного прототипа

Система облачная, так что платная версия позволяет нескольким людям работать над одним проектом одновременно. В бесплатной можно работать одному и проекты ограничены 60 элементами.

У инструмента есть расширение для Google Chrome, так что с его помощью можно быстро добавить диаграммы из Lucidchart в документы и таблицы Google.

Рисование прототипа веб-страницы в Pencil

Бесплатная программа с открытым исходным кодом для рисования прототипов страниц сайта.

В программе есть шаблоны страниц для десктопа, Android и iOS, шаблоны для разных интерфейсных элементов, возможность искать клипарты из интернета, функции рисования диаграмм. Между отрисованными в программе страницами можно сразу настраивать внутренние ссылки, чтобы нагляднее представлять навигацию по сайту.

Отрисовка страницы сайта в программе

Скачать Pencil для Windows или Mac.

Выравнивание текста по сетке с помощью Sassline

Перед разработкой дизайна проекта составляют его прототип — схематичный рисунок страницы с указанием пропорций и расположения всех элементов навигации и контента. Можно отрисовывать страницы вручную в редакторах, но быстрее и проще будет использовать специальные инструменты.

Сервис Sassline помогает составить прототип страниц будущего сайта, гармонично разместить элементы, легко выровнять их расположение по базовой сетке.

Фрагмент примера страницы с линейками

PSD-шаблон для посадочной страницы

На сайте dribbble.com часто можно найти интересные готовые решения для дизайна разных элементов сайта, варианты кода для настройки оригинальной анимации или бесплатные иконки. Дизайнеры и студии делятся своими разработками, демонстрируя свое мастерство.

К примеру, мы нашли бесплатный psd-шаблон для одностраничного сайта, которым поделился дизайнер Arifur Rahman Tushar.

Внешний вид страницы

Вы можете взять его за основу и отредактировать под свой проект — поменять местами блоки, добавить свой текст и иллюстрации.

Мы проверили файл в Adobe Photoshop 2017: открывается, слои на месте, но скорее всего понадобится докачать шрифты.Скачать шаблон

CSS хаки для IE6

Браузер IE6 имеет больше всего багов и проблем с пониманием стандартов W3C, хотя для своего времени он был очень неплох.

Хак с применением правила CSS !important

IE6 игнорирует правило CSS !important, когда внутри селектора присутствует одно и то же свойство более одного раза. В этом случае он поступает просто и использует значение того свойства, которое находится в коде ниже других, независимо от того указан для него приоритет или нет. Соответственно, если сначала указать свойство с приоритетом, а ниже написать его же, но без приоритета, то все браузеры выберут первый вариант, а IE6 — второй. В итоге имеем валидный, соответствующий синтаксису CSS хак для IE6.

Хорошо, но как же поступить, если надо применить к элементу какое-то свойство, которое должно сработать только в IE6, а в других браузерах оно вообще не нужно? Все очень просто. Сначала, как обычно, пишете это свойство с !important, но указываете у него значение, которое оно имеет по умолчанию, а ниже пишете его же, но с необходимым вам значением. Вот и все. Кстати можно поступить и наоборот, задав для всех браузеров нужное значение свойства, а для IE6 установить по умолчанию. Все зависит от того, что вам надо.

Синтаксис:

селектор { свойство: значение !important; } селектор { свойство: значение; }

Валидация: да.

Пример HTML и CSS: хак для IE6 и правило !important

Хак с применением селектора * html

Этот CSS хак для IE6 связан с применением универсального селектора, который ассоциируется в CSS сразу со всеми HTML-элементами на странице. Однако если его использовать в создании селектора потомков, где указать перед селектором html, то это будет противоречить всякой логике, хотя синтаксис CSS и не будет нарушен. Ведь получается, что таким объявлением мы говорим браузерам, что на странице присутствуют элементы, которым тег <HTML> является потомком. Естественно этого не может быть, так как данный тег — это корневой элемент HTML-страницы, и все браузеры это понимают и игнорируют такой селектор, но только не IE6.

Синтаксис:

* html селектор { стили CSS }

Валидация: да.

Пример HTML и CSS: хак для IE6 и универсальный селектор

Хак с применением дочернего селектора

IE6 не понимает дочерние селекторы, что является отличным поводом для создания хака, если мы хотим, чтобы он «не видел» какие-то селекторы с определенными свойствами.

Синтаксис:

html > body селектор { стили CSS }

Валидация: да.

Пример HTML и CSS: хак для IE6 и дочерний селектор

Хак с применением подчеркивания или дефиса

Этот CSS хак для IE6, использует особенность данного браузера распознавать свойства CSS, перед которыми ставится знак подчеркивания (_) или дефиса (-).

Синтаксис:

селектор { _свойство: значение; } селектор { -свойство: значение; }

Валидация: нет.

Пример HTML и CSS: хак для IE6 и свойства с подчеркиванием или дефисом

Звездочка перед именем селектора

Д¾Ã±Ã°Ã²Ã»ÃµÃ½Ã¸Ãµ ÃÂøüòþûð ÷òõ÷ôþÃÂúø (*) ÿõÃÂõô øüõýõü ÃÂÃÂøûõòþóþ ÃÂòþùÃÂÃÂòð ÿÃÂþÃÂøòþÃÂõÃÂøàÃÂÿõÃÂøÃÂøúðÃÂøø CSS, ýþ ÿþýøüðõÃÂÃÂàñÃÂðÃÂ÷õÃÂþü Internet Explorer ôþ òõÃÂÃÂøø 7.0 òúûÃÂÃÂøÃÂõûÃÂýþ. áþþÃÂòõÃÂÃÂÃÂòõýýþ, ÃÂòþùÃÂÃÂòð ÃÂþ ÷òõ÷ôþÃÂúþù òÿõÃÂõôø ñÃÂôÃÂàÃÂðñþÃÂðÃÂàÃÂþûÃÂúþ ò ÃÂÃÂþü ÃÂõüõùÃÂÃÂòõ ñÃÂðÃÂ÷õÃÂþò.

XHTML 1.0
CSS 2.1
IE 6
IE 7
IE 8+
Cr
Op
Sa
Fx

Ã¥ðúøLorem ipsum dolor sit amet…

àôðýýþü ÿÃÂøüõÃÂõ ÷õûõýÃÂù ÃÂòõàÃÂþýð àñûþúð ñÃÂôõàÃÂÃÂÃÂðýþòûõý ÃÂþûÃÂúþ ôûàñÃÂðÃÂ÷õÃÂð Internet Explorer òõÃÂÃÂøø 7.0 ø ýøöõ. àþÃÂÃÂðûÃÂýÃÂàñÃÂðÃÂ÷õÃÂðàÃÂòõàÃÂþýð ñÃÂôõàþÃÂðýöõòÃÂü.