Стрелочки - прошу совета по оптимизации

mustanger · June 13, 2011

Сделал вот такую стрелочку (первая работа). Прошу критики, есть ли ошибки, можно ли уменьшить размер кода?

Код HTML:

<!DOCTYPE html PUBLIC  "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Стрелочки — CSS 2.1 + XHTML 1.0</title>
<link rel="stylesheet" type="text/css" href="strelka.css"/>
</head>
<body>
<div class="rectangle"><a href="">Вперед!</a><div class="arrow-right"></div></div>
</body>
</html>

Код CSS:

.arrow-right { 
     border-color: white white white transparent; 
     border-style: solid; 
     border-width: 12px 0px 12px 12px; 
     top: -24px;
     left: 60px;
     position: relative;
	} 
.rectangle {
     width: 80px;
     height: 20px;
    } 
.rectangle a {
     padding: 4px 25px 0px 0px;   
     font-family: arial;
     font-size: 12px;
     display: block;
     text-align: right;
     height: 100%;
     color: blue;
     background: #faeedd;
    }
.rectangle a:hover {
     color: black;
     background: #f4c430;
     cursor:pointer;
    }

ShumNo · June 13, 2011

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

Оптимизировать проще и эффективней не какую-то часть сайта особенно маленькую, а целиком сверстанную страницу.

Есть так же онлайн сервисы позволяющие оптимизировать стили удаляя в них ненужное, например, padding: 4px 25px 0px 0px; 0 он и в африке 0, давать обозначение к нему необязательно.

mustanger · June 13, 2011

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

Что касается сервисов сжатия CSS(удаление ненужных пробелов и т.д.), то применить их труда не составит, хотелось бы услышать критику самого CSS.

Без единиц измерения у нулей стилевая таблица не проходит валидатор, хотя, безусловно, будет меньше, спасибо.

buddah · June 13, 2011

color: blue;

Так писать неправильно, для цветов есть hex.

mustanger · June 13, 2011

Согласен, лучше в шестнадцатеричном

Vlad · June 13, 2011

color: blue;
Так писать неправильно, для цветов есть hex.

Абсолютно корректно цвет написан.

psywalker · June 13, 2011

color: blue;
Так писать неправильно, для цветов есть hex.
Абсолютно корректно цвет написан.

+1. Мало того ходят слухи, что эти цвета более точные, чем их аналоги на Хексе.

mustanger · June 13, 2011

Здесь есть список цветов, которые можно задавать словом в свойстве color. Валидатор не против, насколько корректно отображают браузеры, сказать не могу. Мне почему-то удобнее hex, и, наверное, лучше задавать цвет везде одинаково.

psywalker · June 13, 2011

Здесь есть список цветов, которые можно задавать словом в свойстве color. Валидатор не против, насколько корректно отображают браузеры, сказать не могу. Мне почему-то удобнее hex, и, наверное, лучше задавать цвет везде одинаково.

Да никто и не говорит, что Хекс - это плохо. Я и сам всегда только хексом пользуюсь, так как он даёт в миллион раз больше вариантов.

mustanger · June 13, 2011

А есть ли еще какие-нибудь замечания? Хотелось бы услышать мнение о стрелочке в целом (плохо/хорошо), может какие-то свойства лишние, плиз.

buddah · June 13, 2011

color: blue;
Так писать неправильно, для цветов есть hex.
Абсолютно корректно цвет написан.

и что, это не противоречит единому стандарту написания css-кода? Я понимаю, что они работают, но считаю ,что задавать в одном месте словом, а в другом - hex - дурной тон.

Кто даст гарантию, что в след спецификации CSS названия цветов не отменят? Или изменят. Это фантастика конечно, но все равно.. А хекс он и в Африке хекс.

Edited June 13, 2011 by buddah

mustanger · June 14, 2011

color: blue;
Так писать неправильно, для цветов есть hex.
Абсолютно корректно цвет написан.
и что, это не противоречит единому стандарту написания css-кода? Я понимаю, что они работают, но считаю ,что задавать в одном месте словом, а в другом - hex - дурной тон.
Кто даст гарантию, что в след спецификации CSS названия цветов не отменят? Или изменят. Это фантастика конечно, но все равно.. А хекс он и в Африке хекс.

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

Это фантастика конечно, но все равно..

С нетерпением жду прочих замечаний...

buddah · June 14, 2011

Тоесть замечания в стиле "это не очень красиво и совсем не современно" не принимаются?

Зачем писать "Вперед"? Весь интернет давно уже стремится к минимализму и интуитивно-понятным вещам. А эта стрелка в стиле 90-ых.

Нарисуйте нормальную стрелку в стиле web 2.0 и уберите слово "Вперед" либо сделайте его красивым и оправданным.

mustanger · June 14, 2011

Тоесть замечания в стиле "это не очень красиво и совсем не современно" не принимаются?

С чего вы это взяли? Принимаются любые замечания, для этого и опубликовано.

Зачем писать "Вперед"? Весь интернет давно уже стремится к минимализму и интуитивно-понятным вещам. А эта стрелка в стиле 90-ых.

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

Нарисуйте нормальную стрелку в стиле web 2.0

Моя стрелка сделана без графики, только на CSS, графика не интересует. Поисковиком пользоваться умею.

Критика принимается любая, однако в первую очередь было бы приятно услышать о качестве CSS.

Sign In

Стрелочки - прошу совета по оптимизации

Question

Link to comment

Share on other sites

13 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information