OpenStreetBugs — лёгкий способ сообщить об ошибке в OpenStreetMap

OpenStreetBugs — лёгкий способ сообщить об ошибке в OpenStreetMap

Вы, конечно, знаете о свободной карте OpenStreetMap. Это настоящая народная карта, создаваемая такими же людьми как и вы! Это такой же opensource-проект как Linux и как Википедия. Конечно же, как и в других картах, в OpenStreetMap имеются ошибки, но в отличие от тех же Яндекс.Карт, где ошибки не исправляются годами из-за сложной бюрократической процедуры (я уже не говорю о намеренных ошибках), в OpenStreetMap всё гораздо проще и лучше для всех нас...
Подробнее..

CloudMade Navigation поддерживает ограничения манёвров

CloudMade Navigation поддерживает ограничения манёвров

Не так давно CloudMade выделил несколько приоритетных направлений, среди которых оказалась и навигация. Решено было создать специальный проект Navi Studio, который объединял бы в себе несколько более мелких сервисов и позволял пользоваться ими, для создания полноценного навигационного программного обеспечения. В Navi Studio вошли: Работа закипела и уже появилось несколько приложений использующих данный проект. Но полноценной навигации без соблюдения правил ПДД не существует, а потому данному вопросу было также уделено не мало времени...
Подробнее..

Удали себя из интернет-социума — «Web 2.0 Suicide Machine»

Удали себя из интернет-социума — «Web 2.0 Suicide Machine»

Недавно наткнулся в сети на один занимательный интернет-сервис, именующийся Web 2.0 Suicide machine . Предназначен он для того, чтобы позволить людям, обремененным «социальной жизнью в интернете», в пару кликов удалить свои аккаунты на Facebook (в данный момент сервис блокирован администрацией по IP), Twitter, Linkedin и Myspace. В общем-то судя по количеству положительных отзывов и «успешных очищений» — пипл хавает зависимые от социальных сетей успешно пользуются сервисом и довольны...
Подробнее..




5 способов улучшить ваш CSS

Веб разработка - CSS

5 способов улучшить ваш css

Практически любой человек сможет написать CSS-код, в наше время любая программа сделает это за вас. Но будет ли это хороший CSS? Далее представлены пять советов по совершенствованию вашего CSS

1. Reset


Обязательно используете сброс настроек в том или ином виде. Вы можете использовать уже готовые решения ( Eric Meyer, YUI), или придумать свое, выбирайте что больше нравится.

Это может быть обычное удаление полей и отступов, у всех элементов:

html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote,
pre, form, fieldset, table, th, td { margin: 0; padding: 0; }

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

И пожалуйста не делайте следующего:

* { margin: 0; padding: 0; }

Этот прием увеличивает время обработки, и при удалении паддинга, некоторые элементы будут отображаться некорректно (например radio button). Элементы форм, при удалении всех настроек, могут вести себя непредсказуемо, поэтому сброс к ним лучше не применять.

2. Алфавитный порядок


В каком из примеров по вашему мнению быстрее можно найти свойство margin-right?

Пример 1


div#header h1 {
z-index: 101;
color: #000;
position: relative;
line-height: 24px;
margin-right: 48px;
border-bottom: 1px solid #dedede;
font-size: 18px;
}

Пример 2


div#header h1 {
border-bottom: 1px solid #dedede;
color: #000;
font-size: 18px;
line-height: 24px;
margin-right: 48px;
position: relative;
z-index: 101;
}

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

Я знаю множество людей, располагающих CSS-свойства разными способами, но в нашей компании мы пришли к соглашению, располагать все свойства в алфавитном порядке. Это помогает, когда приходится работать с кодом, написанным другими людьми. Мне досадно каждый раз, когда приходится работать с css-файлом, в котором свойства не расположены по алфавиту.

3. Группировка


Вы должны организовать ваш CSS-файл так, чтобы искомые объекты и связанные с ними свойства располагались рядом, также эффективно использование комментариев. Вот например мой способ группировки:

/*****Reset*****/
Remove margin and padding from elements

/*****Basic Elements*****/
Define styles for basic elements: body, h1-h6, ul, ol, a, p, etc.

/*****Generic Classes*****/
Define styles for simple things like floating to the sides, removing a bottom margin on elements, etc
Yes, these may not be as semantic as we would all like, but they are necessary for coding efficiently

/*****Basic Layout*****/
Define the basic template: header, footer, etc. Elements that help to define the basic layout of the site

/*****Header*****/
Define all elements in the header

/*****Content*****/
Define all elements in the content area

/*****Footer*****/
Define all elements in the footer

/*****Etc*****/
Continue to define the other sections one by one

Использование комментариев и группировка схожих элементов, помогает быстро находить необходимые объекты и их свойства.

4. Последовательность


Какой бы способ написания кода вы не выбрали, придерживайтесь его. Меня уже тошнит от CSS-дебатов посвященных выбору правильного способа написания кода, 1-строчное против многострочного. Каждый имеет право на свое собственное мнение, так что выберите наиболее удобный для вас и используйте его во всех CSS-файлах.

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

div#header { float: left; width: 100%; }
div#header div.column {
border-right: 1px solid #ccc;
float: right;
margin-right: 50px;
padding: 10px;
width: 300px;
}
div#header h1 { float: left; position: relative; width: 250px; }

5. Начните правильно


Не начинайте писать css-стиль, пока не закончена разметка страницы.
Прежде чем создавать CSS-файл, я пишу всю разметку страницы начиная от открывающего тега body, до закрывающего. Я не добавляю лишних div-ов, id и классов, только некоторые характерные блоки, типа header, content, и footer.

Используйте наследование CSS-селекторов, для расположения дочерних элементов, не добавляйте автоматически классы и id к элементам. Помните главное: CSS ничего не стоит без хорошо отоформатированного документа.

 


Читайте:


Добавить комментарий


Защитный код
Обновить

News image

Adobe и Nokia объявили о создании фонда Open Screen Project на 10 млн.

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

News image

Microsoft для российских разработчиков: практика с элементами фундамен

26 марта 2010 года в Центре международной торговли на Краснопресненской набережной Москвы компания Microsoft впервые в России провела конференцию дл...

News image

Браузер Safari обновился до 5й версии

Примерно полчаса назад Apple выложила для свободного скачивания новую версию своего браузера — Safari 5. Список изменений коротко можно описать т...

News image

Oracle RAC. Общее описание

Высоконагруженные сайты, доступность «5 nines». На заднем фоне (backend) куча обрабатываемой информации в базе данных. А что, если железо забарахлит...

News image

Набор интегрированных продуктов Oracle Access & Identity Managemen

Oracle IAMS представляет собой семейство интегрированных продуктов для управления безопасностью на основе бизнес-ролей и должностных обязанностей; д...

Топ технологий:

News image

Оздана новая система беспроводной связи - она в 10

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

News image

Как взломали Twitter

В Интернетах, наряду с iPad, сканерами в аэропортах и войне между Google и Apple, уже второй день подряд активно обсуждается тема взлома и...