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

Black Hat: Adobe присоединяется к программе Microsoft по уведомлению о

Компании Adobe и Microsoft объединяют усилия для того, чтобы предоставлять антивирусным компаниям и разработчикам более полную информацию о процессе...

News image

Встроенные средства для разработчиков Mac

Система Mac OS X Snow Leopard включает в себя полный набор инструментов разработчика, объединённых одной целью: дать вам возможность создавать отлич...

News image

Новости для разработчиков

Microsoft выпустила обновленную версию своего набора вспомогательных инструментов разработчика под названием Visual Studio 2010 Productivity Power T...

News image

Adobe представила второе поколение Air

Компания Adobe представила второе поколение кросс-платформенной технологии Air (Adobe integrated runtime), сообщается в блоге компании. Новая версия...

News image

Google предлагает пользователям «изобретать» приложения

Компания Google продемонстрировала в прямом эфире из Google Labs свой новый сервис App Inventor, позволяющий создавать приложения для мобильных теле...

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

News image

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

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

News image

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

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