|
20 полезных советов по CSS для веб мастера
|
|
| Kosten | Вторник, 31 Июля 2018 | Сообщение 1 |
| В этой статье мы хотим поделиться с вами коллекцией из 20 полезных конвенций и передовой практики, рекомендованных сообществом CSS. Некоторые из них больше ориентированы на начинающего веб мастера, а также для продвинутого пользователя, где надеемся, что каждый найдет классный способ по стилистике, о котором не знали. Ниже приведены несколько советов и советов CSS, которые, как я думаю, должны знать каждый веб-разработчик. Возможно, вы уже знаете многие из этих трюков. Возможно, вы уже знаете многие из этих трюков.
При разработке веб-сайта рекомендуется следовать набору лучших практик и полезным соглашениям, рекомендованным сообществом CSS. Как интерфейсный веб-разработчик, вы, вероятно, столкнулись с некоторыми проблемами с кодированием, которые вы позже поняли, могли быть решены простым современным CSS. Вот почему использование этих простых советов и трюков сэкономит вам много времени и беспокойства, когда вы создадите свой удивительный сайт.
Этот пост предназначен для объединения 20 лучших советов и трюков, которые вам, вероятно, понадобятся на ежедневной основе при создании маркетинговых активов.
1. Круглые углы без изображений
Вот простая методика CSS округления углов DIV с использованием некоторых атрибутов css. Этот метод будет работать в Firefox, Safari, Chrome и любом другом браузере, совместимом с CSS3. Этот метод не будет работать в Internet Explorer.
Код div {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
Для округления определенного угла, как вверху слева или внизу справа, используйте таблицу стилей ниже.
Код div {
-moz-border-radius-topleft: 5px;
-webkit-border-top-left-radius: 5px;
}
2. Создайте специальную таблицу стилей IE
Создайте отдельную таблицу стилей и включите ее на веб-странице всякий раз, когда клиент использует Internet Explorer.
Код <!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie-only.css" />
<![endif]-->
Только IE 7
Код <!--[if IE 7]>
<link href="IE-7-SPECIFIC.css" rel="stylesheet" type="text/css">
<![endif]-->
3. Фоновое изображение текстового поля
Вы видели текстовые поля с фоновыми изображениями, такими как поиск увеличительного стекла или других изображений. Просто используйте следующую таблицу стилей, чтобы добавить фоновое изображение в любое поле ввода.
Код input#sometextbox {
background-image:url('http://zornet.ru/ZORNET.jpg');
background-repeat:no-repeat;
padding-left:18px;
}
4. Установка минимальной ширины страницы
Очень удобная команда CSS, которая существует, это команда min-width, в которой вы можете указать минимальную ширину для любого элемента. Это может быть особенно полезно для указания минимальной ширины страницы.
Код <body> <div id="container">
Затем мы создаем наши команды CSS, чтобы создать минимальную ширину 600 пикселей:
Код #container {
min-width: 600px;
width:expression(document.body.clientWidth < 600? "600px": "auto" );
}
Первая идет, как регулярная команда минимальной ширины, вторая - короткая команда JavaScript, которую понимает только IE. Обратите внимание, что эта команда приведет к недействительности вашего документа CSS, поэтому вы можете вставить его в начало каждого HTML-документа, чтобы обойти это.
5. Прозрачность кросс-браузера
Используйте следующую таблицу стилей, чтобы сделать элемент-трансперант, установив уровень непрозрачности.
Код .transparent_class {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
6. Запретить прокрутку Firefox Scrollbar Jump
В Firefox не отображается полоса прокрутки, если содержимое страницы соответствует высоте браузера. Но если контент растет, Firefox отображает полосу прокрутки, выполняя скачок прокрутки. Содержимое экрана будет сдвинуто влево. Чтобы этого избежать, мы можем сказать, что Firefox по умолчанию добавляет полосу прокрутки.
Код html { overflow-y:scroll; }
7. Поворот текста с помощью CSS
Этот пример поворачивает текст на 90 градусов против часовой стрелки.
Свойство вращения фильтра BasicImage Internet Explorer может принимать одно из четырех значений: 0, 1, 2 или 3, которые будут вращать соответственно элементы 0, 90, 180 или 270.
Код .rotate-style {
/* Safari */
-webkit-transform: rotate(-90deg);
/* Firefox */
-moz-transform: rotate(-90deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
8. CSS для мобильных устройств
Отдельный документ CSS можно создать для КПК и мобильных телефонов и активироваться только при использовании одного из этих устройств для доступа к вашему сайту. Все больше веб-сайтов создают отдельные документы CSS для печати, поэтому веб-страницы автоматически становятся удобными для печати, когда пользователи предпочитают печатать их. Вы также можете сделать то же самое для карманных устройств.
Следующая команда используется для вызова документа CSS для карманных компьютеров:
Код <link type="text/css" rel="stylesheet" href="handheldstyle.css" media="handheld" />
9. Изменить цвет выделения текста
По умолчанию в качестве выбора текста браузер использует синий цвет. Вы можете изменить этот цвет в соответствии с темой вашего сайта.
Код /* Mozilla based browsers */
::-moz-selection {
background-color: #FFA;
color: #000;
}
/* Works in Safari */
::selection {
background-color: #FFA;
color: #000;
}
10. Удалите пунктирные границы
Пунктирные границы вокруг ссылок - это функция доступности, доступная большинству браузеров по умолчанию.
Код a:active {
outline: none;
}
11. Центрирование веб-сайта
Большая часть веб-сайта использует этот метод для центра контента.
HTML
Код <body> <div id="sarunilas"> <!-- all websites HTML here --> </div> </body>
CSS
Код #page-wrap {
width: 750px;
margin: 0 auto;
}
12. Шапки для удаления CSS
Если ваш браузер поддерживает псевдо-класс, первая буква будет закрывающейся крышкой.
Код p:first-letter {
font-size : 300%;
font-weight : bold;
float : left;
width : 1em;
}
13. Иконки, специфичные для атрибутов
Селекторы атрибутов CSS очень мощные, что дает вам множество опций для управления стилями различных элементов, например вы можете добавить значок на основе атрибута href тега, чтобы пользователь знал, ссылается ли ссылка на изображение, файл pdf, файл doc и так далее.
Код a[href$='.doc'] {
padding:0 20px 0 0;
background:transparent url(http://zornet.ru/Aben/JdPP3A0SR5eBIkFnVcMsEg.png) no-repeat center rightright;
}
14. Использовать текст в тексте
Этот трюк особенно полезен для отображения названия статьи на веб-странице со всеми ее словами, начиная с заглавной буквы.
Код text-transform: capitalize;
text-transform: lowercase
text-transform: uppercase
15. Текстовая тень CSS
Обычный или простая тень, которая преднозначена для текста:
Код p { text-shadow: 1px 1px 1px #252424; }
Несколько теней:
Код p { text-shadow: 1px 1px 1px #1f1d1d, 3px 3px 5px #1717ca;}
Первые два значения определяют длину смещения тени. Первое значение указывает горизонтальное расстояние, а второе указывает вертикальное расстояние тени. Третье значение указывает радиус размытия, а последнее значение описывает цвет тени:
16. Использование
Опытные программисты CSS, как правило, знают об этом, но новички упускают это важное правило CSS. Добавив важное значение для вашего правила CSS, вы можете увеличить его приоритет перед другими последующими правилами, например в нижнем коде фоновый цвет будет синим и не красным из-за важности.
Код .page { background-color:blue !important; background-color: #dc4040; }
17. Распечатки страниц страницы
Хотя большинство пользователей Интернета предпочитают читать контент в интернете, но некоторые из ваших пользователей могут печатать вашу статью. С помощью CSS вы можете контролировать разрывы страниц внутри контента, просто добавьте этот класс CSS в таблицу стилей и добавьте этот класс в любой тег, который вы хотите распечатать на следующей странице.
Код .page-break { page-break-before:always; }
18. Курсоры указателей CSS
В последнее время эта тенденция закрепилась, где все элементы пользовательского интерфейса на веб-странице, которые можно щелкнуть по пользователю, имеют свой указатель, подобный гиперссылке, где трюк CSS для этого.
Код input[type=submit],label,select,.pointer { cursor:pointer; }
19. Установите согласованный размер базового шрифта
Установка свойства font-size на 62,5% в теге body делает 1em равным 10px. Это позволяет легко использовать их, так как вы можете узнать размер шрифта в пикселях от значений em.
Код body{ font-size:62.5%; }
20. Совершенная страница-печать с помощью CSS
Есть много людей, которые пользуются интернетом, которые все еще хотят распечатывать полезные статьи и хранить их в бумажной форме. Чтобы снять это, вам нужно использовать разрывы страниц CSS и XHTML.
Код @media all
{
.page-break { display:none; }
}
@media print
{
.page-break { display:block; page-break-before:always; }
}
Хотя это может быть не так актуально в CSS, как в HTML, выполнение вашего последнего кода по-прежнему является важным процессом. Валидация может помочь вам выявить любые ошибки и плохие практики или просто помочь вам улучшить код.
Это может занять некоторое время, чтобы привыкнуть к CSS, но в конечном итоге ваша работа станет намного проще. Вы уже использовали какие-либо из этих советов? Есть ли какие-нибудь другие отличные трюки CSS, которые вы знаете, которые должны быть в этом списке.
| | Страна: (RU) |
| |
| Kosten | Понедельник, 06 Августа 2018 | Сообщение 2 |
|
| Благодаря последним достижениям в области технологий разработчикам больше не нужно начинать работу с сайта с помощью scrtach. Существует много HTML и CSS настроек, в которых есть шаблоны, где можно использовать для запуска проекта разработки веб-сайта.
HTML5 и CSS3 увеличили объесть возможностей дизайна. Благодаря многочисленным кодам, доступным для различных вещей, таких как файлы анимации, заголовки, эффекты зависания, стили шрифтов и различные типы загрузчиков, разработчики могут быть творческими. Существуют различные CSS меню, макеты, шаблоны, ресурсы и ссылки, доступные бесплатно. Большинство из них содержат пошаговые инструкции о том, как их использовать или предоставлять учебные пособия.
Ниже приведен список некоторых кодов, которые можно загрузить и что можно использовать для стилизации веб страницы. Эти коды просто нужно вставить в код HTML и напрямую использовать. Не нужно узнавать о JavaScripts или запросить их использование.
Вашему вниманию 100 свежих и, надеюсь, полезных советов и советов CSS.
1. Очень важно, когда вы работаете с CSS, чтобы знать о различных свойствах в вашем распоряжении и о том, как их правильно использовать.
2. Использование хорошего редактора может повысить производительность. Подсветка синтаксиса и функция авто заполнения (плюс проверка и ссылки на код) облегчают жизнь. Проверьте Notepad ++, Coda, а не скидка Dreamweaver CS в код зрения, пока не попробуешь.
3. Во многом экспериментирование является матерью инноваций. Дайте себе время для игры; проб и ошибок поможет вам быстро изучить и запомнить методы. Ознакомьтесь с этими экспериментами CSS3 для вдохновения: как создать вложенную типографию с помощью CSS3, семантических лайтбоксов CSS3 и 10 интересных экспериментов и демонстраций CSS3.
4. Включите сервер сжатия Gzip по возможности; он уменьшает размер файлов, таких как CSS и JavaScript, без удаления какого-либо содержимого.
5. Кэширование будет сохранять полосу пропускания для посетителей и учитывать гораздо более быстрые скорости. Воспользуйтесь им, когда сможете. Узнайте об оптимизации кеширования браузера.
6. Пробелы важны для удобочитаемости CSS. Использование пробелов для форматирования таблицы стилей добавляет байты к размеру файла, но это компенсируется повышенной читабельностью.
7. Избегайте использования встроенного кода, где в любом элементе с использованием style атрибута или в документе HTML внутри тегов, и вместо этого помещайте их во внешние таблицы стилей. Это будет проще поддерживать, а также использовать кеширование браузера.
8. Какой бы метод вы не использовали для выведения кода, будьте последовательны. Вы избежите потенциальных проблем, таких как неправильное толкование.
9. Условные комментарии могут помочь вам настроить версии Internet Explorer для стиля. Фильтрация кода конкретного поставщика не идеальна, а комментарии более безопасны, чем уродливые хаки.
10. Этот совет немного противоречив, но я рекомендую использовать только таблицу стилей, а не несколько. Он уменьшает количество HTTP запросов и улучшает ремонтопригодность, давая вашему сайту прирост производительности. Это подсказка, поддерживаемая рекомендациями Google Page Speed.
11. Когда существуют противоречивые правила стиля, правила стиля, где позже сбрасываются на таблицу стилей, заменяют те, которые появляются перед ним. Таким образом, введите критические объявления в конце, где им не грозит переопределение других стилей.
12. Если вы столкнулись с ошибкой и не можете определить ее причину, отключите CSS используя что-то вроде Firebug или надстройку веб разработчика или просто закомментируйте все стили, а затем верните селектора один за другим, пока ошибка не будет реплицироваться, где таким образом идентифицируются.
13. Убедитесь, что ваш код работает в разных браузерах. Проверьте его на последние версии пяти лучших: Internet Explorer, Firefox, Chrome, Safari и Opera.
14. Кроме того, убедитесь, что ваш код будет деградировать, когда CSS отключен в браузере пользователя. Чтобы проверить это, отключите стили в каждом браузере или используйте текстовый браузер, такой как Lynx.
15. Очевидно, что ваш код ухудшается, но многие люди забывают, что у некоторых посетителей будет изворотливый браузер или стили отключены, поэтому проверьте, работают ли ваши резервные копии.
16. Каждый браузер имеет встроенный отладчик. В IE и Firefox вы можете добраться до инспектора, нажав F12; для Chrome, Safari и Opera нажмите Ctrl + Shift + I.
17. Эмуляторы браузера не могут заменить реальную вещь, поэтому используйте реальную или виртуализированную версию браузера или устройства.
18. Знаете ли вы, что PHP код может создавать динамические файлы CSS? Вот урок по этому поводу. Просто дайте файлу расширение.php и убедитесь, что файл объявляет заголовок документа text/css типом содержимого.
19. Именование файлов CSS может быть сложным. Один из лучших способов приблизиться к задаче - сохранить имена файлов короткими и описательными, например screen.css, styles.css или print.css.
20. Любой код или процесс, который вы создаете, ценны, а переработка того, что вы создали для других проектов, не так уж и плохо: ранее существовавший код - отличный временный ресурс, и именно так рождаются структуры JavaScript и CSS.
21. Хотя комментарии в файлах CSS могут помочь другим людям, которые их читают или поддерживают, избегайте писать комментарии, если они не требуются. Комментарии потребляют полосу пропускания. Напиши CSS в понятном порядке, организовав их интуитивно и используя хорошие соглашения об именах.
22. Если вы пытаетесь вспомнить, что доступно в CSS (или даже CSS3), получите некоторые виталисты. Они просты и могут помочь вам привыкнуть к синтаксису. Вот несколько отличных CSS чит листов: CSS Cheat Sheet (добавленные байты), CSS Shorthand Cheat Sheet (Michael Leigeber), CSS 2.1 и CSS 3 Справка Cheat Sheets (PDF) (Smashing Magazine).
23. Плохой код разбивает больше сайтов, чем что-либо еще. Подтвердите свой код, используя бесплатную веб службу W3C CSS Validation Service для снижения потенциальных сбоев.
24. Vendor-specific CSS не будет проверяться в соответствии с текущими спецификациями W3C (CSS2.1), но может дать вашему дизайну некоторые полезные улучшения. Кроме того, если вы хотите использовать некоторый CSS3 для прогрессивного улучшения, в некоторых случаях нет возможности использовать их. Например, свойство -webkit-transformand -moz-transform было использовано для постепенного улучшения этих CSS3-анимированных карт для пользователей, использующих Safari, Chrome и Mozilla Firefox.
25. Храните несколько файлов CSS в одном каталоге с интуитивным именем, таким как css. Если ваш веб-сайт содержит сотни страниц, важна ремонтопригодность и информационная архитектура.
| | Страна: (RU) |
| |
| Kosten | Понедельник, 06 Августа 2018 | Сообщение 3 |
|
| 26. Будьте осторожны при использовании атрибута media в своем объявлении HTML для внешнего файла CSS. Возможно, вам не удастся использовать медиа запросы, чтобы лучше предусмотреть кэшированные альтернативные визуальные эффекты.
27. Если вы найдете элементы, которые используют одни и те же свойства и значения, группируйте их вместе, используя запятую (,) для разделения каждого селектора. Это избавит вас от повторения.
Например, если у вас есть следующее:
h1 {color:#000;}
h2 {color:#000;}
Объедините их как таковые:
h1, h2 {color:#000;}
28. Таблицы стилей для печати очень важны, если вы хотите сохранить чернила и бумагу своих посетителей. Используйте @media printправило at и удалите все, что не нужно на распечатанной странице.
29. Доступность также с тем, как говорится написанное слово. aural, что теперь осуждается в CSS и speech медиа - запросы могут повысить удобство чтения с экрана.
30. К сожалению, handheld медиа запрос в CSS не поддерживается широко. Если вы хотите, чтобы ваш веб-сайт работал на мобильных устройствах, не зависеть от него, чтобы показывать правильные изображения на мобильных устройствах.
31. Найдите время, чтобы устранить дублирующие ссылки и конфликты в вашем CSS. Это займет некоторое время, но вы получите более оптимизированный рендеринг и меньшее количество байтов в ваших файлах.
32. Когда вы работаете с событиями наведения мыши, имеете дело с:linkт псевдо-классом (1), затем (2) :visited, затем (3) :hover и наконец (4) :active- в этом порядке. .
33. Создание веб-сайта на устройствах Apple iOS очень просто: для масштабирования вашего дизайна просто используйте медиа-запросы CSS3 с соответствующими значениями min-width и max-width значениями. Вот учебник для этого.
34. Наложите максимум наследования CSS, применив необходимые стили к родительским элементам, прежде чем применять их к детям. Вы могли поразить нескольких птиц одним камнем.
35. Вы можете применить несколько классов к элементу с пространственным разделением, что отлично, если вы хотите делиться свойствами с многочисленными элементами без перезаписи других стилей.
36. Если вы не хотите иметь дело с зависимостями условного комментария IE6, им нужен отдельный CSS файл, тогда вы можете использовать * html селектор star hack (), который является чистым и проверяет.
37. HTML подсказки отлично подходят для обычного текста, но :hover всплывающие подсказки псевдокласса для CSS дают вам больше возможностей для отображения стилизованного контента. Ознакомьтесь с этим руководством по созданию всплывающих подсказок только для CSS .
38. С помощью селекторов атрибутов вы можете добавлять значки или уникальные стили в зависимости от типа файла, на который вы ссылаетесь в привязке. Вот пример , с которым вы можете добавить стиль в ссылку PDF: a[href$='.pdf].
39. Вы также можете использовать атрибут селекторы для нацеливания на определенный псевдо протоколе, такие, как mailto или skype: [href ="skype:"].
40. Рендеринг CSS занимает много времени, а списки выбора содержат байты. Уменьшите рабочую нагрузку рендеринга, используя только нужные вам селектор idлучше, чем многие дочерние ссылки.
41. Не все согласятся с этим, но я рекомендую писать каждый «пользовательский» селектор вниз как class(до его создания id), чтобы помочь устранить повторяющиеся записи.
42. При структурировании вашего CSS-файла с помощью селекторов соглашение заключается в перечислении элементов, затем классов (для общих компонентов) и, наконец, любых идентификаторов (для конкретных, уникальных стилей).
43. Важное значение имеют соглашения об именах для селекторов. Никогда не используйте имена, описывающие физические атрибуты (например, redLink), потому что изменение значения позже может привести к неправильному названию.
44. Чувствительность к регистру относится к соглашениям об именах. Некоторые люди используют тире (например content-wrapper) или подчеркивания (т. Е. content_wrapper), Но я настоятельно рекомендую использовать верблюд (например contentWrapper) для простоты.
45. Универсальный селектор (*) широко используется в механизмах сброса CSS для применения определенных свойств ко всему. Избегайте его, если можете; он увеличивает нагрузку на рендеринг.
46. С помощью мультимедийных запросов CSS3 вы можете легко ориентировать ориентацию видового экрана с портретным или альбомным режимом. Таким образом, карманные устройства максимально используют область отображения.
47. Устройства Apple уникальны тем, что они поддерживают тег, который имеет стилистическую ценность. Вы можете использовать это, чтобы заставить экран масштабированья с фиксированной скоростью 100%.
48. Два псевдоэлемента CSS3 :target и:checked имеют большой потенциал. Они применяют свой обозначенный стиль только к определенным событиям и могут быть полезны в качестве альтернатив событий наведения.
49. Встраивание содержимого в CSS - это уникальный способ дать привязку ссылок для некоторых описаний в таблицах стилей, подходящих для принтера. Попробуйте их с::before или::after псевдо-элементов.
50. Идентификаторов могут служить двойной цели в CSS. Они могут использоваться для применения стилей к одному элементу и для использования в качестве идентификатора привязывающего фрагмента к определенной точке на странице.
| | Страна: (RU) |
| |
| Kosten | Понедельник, 06 Августа 2018 | Сообщение 4 |
|
| Когда мы не выбираем элементы для стилизации, мы тратим много времени на выяснение того, как все должно выглядеть на странице. Сброс CSS и рамки помогают нам в согласованности, но мы должны знать, как правильно применять стили, такие как позиционирование и интервал. Этот набор полезных советов относится к аспектам CSS, которые в корне влияют на то, как появляются и размещаются компоненты веб-сайта.
51. Многие проекты ориентированы на сетки и прямоугольные области окна просмотра. Вместо этого создайте иллюзию выхода из коробки для дополнительного эффекта.
52. Если margin: auto; на левой и правой сторонах вам не нужна центральная точка, попробуйте использовать left: 50%; position: absolute; и отрицательный запас на половину ширины элемента.
53. Помните, что ширина элемента составляет указанную ширину, а также ширину границы и любые отступы и поля.
54. Еще один спорный наконечник: не используйте CSS сбросы, так как они не нужны, если у вас есть время для хорошего кодирования.
55. Структура CSS, такие, как Blueprint или YUI Grids CSS может помочь вам ускорить время разработки. Это немного лишний код для загрузки пользователем, но он может сэкономить ваше время.
56. Помните, что Internet Explorer 6 не поддерживает фиксированное позиционирование. Если вы хотите, чтобы меню было липким, для него потребовались некоторые хаки или обман.
57. Пространство в веб-дизайне не забывайте об этом. Используйте поля и отступы, чтобы придать вашему макету и его содержимому некоторую передышку.
58. Если одна вещь преувеличивает задачу масштабирования конструкции так, как вы хотите, она использует несогласованные измерения.
59. Различные браузеры имеют разные реализации; например, пользователи с ослабленным зрением могут захотеть увеличить масштаб. Дайте вашему макету быстрый тест в веб браузерах, чтобы гарантировать, что стиль не сломается.
60. Большинство браузеров могут использовать box-shadow без дополнительного HTML. IE может сделать то же самое сfilter: progid:DXImageTransform.Microsoft.Shadow(color='#CCCCCC', Direction=135, Strength=5);
61. Закругленные углы не так сложно сделать, как раньше. CSS3 позволяет использовать border-radius свойство для объявления кривизны каждого угла без излишней надбавки и использования изображений.
62. Недостаток жидких макетов заключается в том, что просмотр на большом экране приводит к разливу содержимого через окно просмотра. Сохраните свой желаемый макет и его пределы, используя min-width и max-width.
63. WebKit анимации и переходы могут работать только в Safari и Chrome, но они добавляют несколько дополнительных уникальных, изящных расцветок, достойных включения в интерактивный контент.
64. Если вы хотите сложить некоторые элементы друг над другом, используйте z-index свойство; назначенный вами индекс вытаскивает элемент вперед или выталкивает его за элемент с более высоким значением.
65. Viewport размеры не являются предметом резолюции. У ваших посетителей может быть любое количество панелей инструментов, боковых панелей или размеров окон, например, они не используют свои браузеры максимально, которые изменяют количество доступного пространства.
66. Удаление помех из интерфейса с помощью display:none может показаться хорошей идеей, но пользователи с экрана не смогут читать контент вообще.
67. Будьте осторожны с overflow свойством CSS при обслуживании мобильных устройств с сенсорным экраном. Например, для iPhone требуется два пальца (не один) для прокрутки переполненной области, что может быть сложно.
68. Вы когда-нибудь сталкивались с выражениями CSS, это проприетарный метод Microsoft вставить DOM скрипты в CSS. Не беспокойтесь о них сейчас; они полностью устарели.
69. Хотя cursor свойство CSS может быть полезно при определенных обстоятельствах, не манипулируйте им таким образом, чтобы затруднить поиск курсора на экране.
70. Горизонтальная прокрутка может показаться, как уникальный способ позиционирования и содержание стиля, но большинство людей не привыкли к этому. Решайте внимательно, когда такие соглашения следует использовать.
71. До тех пор, пока Internet Explorer 9 не станет окончательным, CSS3 будет иметь некоторые важные проблемы совместимости. Не полагайтесь слишком сильно на него для стабильных макетов.
72. CSS позволяет предоставлять информацию по запросу. Если вы можете дать людям информацию в небольших кусках, они с большей вероятностью прочтут ее.
73. Когда вы демонстрируете меню в CSS, будьте последовательны в реализации. Люди хотят знать об отношениях между объектами, и важно избегать диссонанса.
74. CSS не является решением для всех ваших макетов несчастий, это инструмент, чтобы помочь визуальное путешествие. Все, что вы производите, должно использоваться и логически предназначено для пользователей..
75. После того, как ваш макет отмечен CSS, получите обратную связь о том, насколько он полезен на самом деле; попросите друзей, семью, сотрудников, посетителей или незнакомцев за их мнение.
| | Страна: (RU) |
| |
| Kosten | Вторник, 07 Августа 2018 | Сообщение 5 |
|
| Если одна вещь заслуживает собственного набора советов, это сложный вопрос: добавить в CSS типографщику, цвет и образ. Нам нужен читаемый контент, и мы хотим его в согласованном макете. В этом разделе мы научимся использовать типографику и цвет, которые являются мощными соглашениями в дизайне. Здесь тема об безопасных сайтах и последних проблемах, связанных с внедрением шрифтов.
76. Сжатие содержимого слишком близко друг к другу может уменьшить общую читаемость. Используйте line-height свойство для пространственных строк текста соответствующим образом.
77. Будьте осторожны letter-spacing: слишком много места и слова станут нечитаемыми, слишком мало, и буквы будут перекрываться.
78. Если у вас нет веских оснований, не прописные, то есть text-transform:uppercase; длинные фрагменты текста, например, HEY GUYS AND GALS WHAT'S UP.
79. Сайтов для инвалидов имеют хорошие контрастные цвета. Существуют инструменты для измерения цветов переднего плана с цветами фона и получения контрастности. Ознакомьтесь с этим списком инструментов для проверки цвета вашего дизайна. Убедитесь, что ваш текст является разборчивым.
80. Помните, что стили по умолчанию могут значительно отличаться от браузера к браузеру. Если вы хотите стилистическую расцветку, укрепите поведение в таблице стилей.
81. В старые времена количество цветов, отображаемых на экране, было довольно ограниченным. Некоторые люди по-прежнему используют старые мониторы, но потребность в безопасных для использования в интернете цветах резко сокращается.
82. Создание стека шрифтов необходимо при грамотном дизайне. Убедитесь, что резервные шрифты существуют в случае, если запрашиваемый вами запрос недоступен.
83. В Vista, Windows 7 и MS Office 07-10 (и их бесплатных зрителей) появилось множество новых веб безопасных шрифтов, таких как Candara, Calibri и Constantina.
84. Много смартфон приложений могут увеличить вашу способность построить таблицу стилей, но Гарнитуры для iPhone и других устройств iOS4 является особенно полезным, поскольку он показывает вам каждый шрифт установлен.
85. Веб безопасные шрифты не являются гарантией; люди вполне могли бы удалить шрифт, даже вездесущий, как Arial. Тогда их браузеры не смогут его отобразить.
86. Избегайте подчеркивания содержания с помощью text-decoration свойства, если оно не является реальной ссылкой. Люди связывают подчеркнутый текст с гиперссылками, а подчеркнутое слово может создать впечатление, что ссылка нарушена.
87. Избегайте соблазна использовать символические шрифты, такие как Wingdings или Webdings в макете. Он может сохранять KBs на изображениях, но он будет служить бессмысленным письмом для пользователей экранного чтения.
88. Помните, что в @font-face зависимости от того, в каком браузере включен пользователь, такие как EOT, WOFF, TTF и OTF существуют разные требования к формату файла. Подавайте соответствующий формат каждому браузеру.
89. outline свойство серьезно недогружено в качестве помощи веб - доступности. Вместо того, чтобы оставлять для него значение по умолчанию, используйте стили границ, чтобы повысить видимость активного события.
90. Смартфоны не имеют того же уровня поддержки ядра веб типографии, что и настольные браузеры, что означает меньшее количество веб безопасных шрифтов и отсутствие обычного @font-face внедрения.
91. Кросс-браузер непрозрачности, что деградирует изящно может применяться с использованием -ms-, -moz-, -khtml-префиксы и filter: alpha(opacity=75);свойство для Internet Explorer.
92. Вы можете делать background-image пули, используя list-style-type:none;, добавляя padding-left отступ и позиционируя background-image влево с требуемым смещением пикселей.
93. Помочь пользователям определить поле ввода легко; просто добавьте фоновое изображение имени (например, «Поиск» или «Пароль») и установите его так, чтобы изображение исчезло при щелчке по элементу, используя:focus псевдокласс, а затем установив background свойство none.
94. Области больших и видимых кликов улучшают полезность и удобство привязки ссылок, что, в свою очередь, направляет людей среди страниц. Будьте внимательны, когда вы их ставите.
95. Помните, что фоновое изображение не заменяет текстовое содержимое. Если применяется отрицательный отступ, например, и изображения отключены, заголовок будет невидимым.
96. Навигационные элементы должны быть соответствующим образом помечены. Если вы используете кнопку «призыв к действию» или панель инструментов на основе изображений, убедитесь, что текстовое описание доступно для чтения с экрана.
97. Если идея применения непрозрачности с кучей запатентованных элементов вам не нравится, попробуйте RGBA прозрачность в CSS, а не background-color: rgba(0,0,0,0.5);.
98. Если ваши посетители используют IE6, избегайте использования px в качестве единицы измерения для текста. Пользователи IE6 не имеют функции масштабирования; они полагаются на изменение размера текста, которое не работает с px. Вместо этого используйте относительную единицу, например em.
99. Предоставление альтернативных таблиц стилей для поддерживаемых браузеров, таких как Firefox и Opera, может повысить читаемость, как в случае с высококонтрастными альтернативами.
100. Если вы обнаружите, что трудно выбрать цвета, веб инструменты, такие как Adobe Kuler, могут помочь настольные инструменты, такие как ColorSchemer Studio и мобильные приложения, такие как Palettes Pro.
Внедрение CSS может расстраивать, что с текущими проблемами браузера, но это все еще один из самых забавных веб языков, с которыми вы можете общаться. Вместо того, чтобы создавать структуру объектов или заниматься сложными механизмами, вы можете определять, как должен выглядеть контент. Это похоже на то, что ему дали чистый лист бумаги и пачку мелок. И дизайнеры экспериментируют с доступными стилями для создания прекрасных впечатлений для зрителей.
Рассмотрите последствия каждого свойства и стиля, которые вы заявляете. CSS может превратить простейший или минималистичный макет в сложную структуру интерактивности, которая пугает всех, кроме самых преданных людей. По мере расширения возможностей и опций в CSS и обновления устройств для их поддержки появится новая волна уникальных макетов.
| | Страна: (RU) |
| |
| Kosten | Понедельник, 29 Апреля 2019 | Сообщение 6 |
|
| Сокращенный CSS дает вам более короткий способ написания ваших CSS-кодов, и, самое главное, он делает код понятнее и проще для понимания.
Вместо CSS кода такого типа:
Код .header {
background-color: #fff;
background-image: url(image.gif);
background-repeat: no-repeat;
background-position: top left;
}
Можно написать более понятный и короткий код:
Код .header {
background: #fff url(image.gif) no-repeat top left
} | | Страна: (RU) |
| |
| Kosten | Понедельник, 29 Апреля 2019 | Сообщение 7 |
|
| Избегайте лишних селекторов
Иногда ваша декларация CSS может быть проще, то есть если вы обнаружите, что кодируете следующее:
Их можно сократить до следующего:
Пояснение: li будет существовать только в рамках ul или ol и td будет только внутри tr и table поэтому не нужно повторно включить их в объявления свойств.
| | Страна: (RU) |
| |
