Стоит ли такие фичи реализвоать в CSS

[alexpop]

Активно изучаю веб, и пробую новые приемы в CSS3 и.т.п.

Делаю себе новую шкуру с использованием некоторых прибамбасов. http://dgbomb.com/maket/

Есть несколько вопросов:

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

2. У меня макет пересчитывается через CSS на несколько разрешений. То есть, на разнах разрешениях - разная ширина макета. Насколько это приемлимо. Или лучше сделать через скрипт.

3. Заметил, что слайдеры на превьюшках в файрфоксе анимируются скачками. Это особенность броузера? Или у меня косяк.

4. Общий вопрос. Как сохранить баланс в наследовании классов типа .style ul li ul {} или .sub-style-ul ul {} или .sub-style-ul-ul {}. Насколько в реальности грузит броузер подобное наследование?

5. Ну и по возможности насколько грамотная сборка...

[psywalker]

alexpop,

1) Да думаю грузят не очень сильно, ведь это всё равно CSS, а не скрипты.

2) Лучше оставить через CSS

3) Слайдеры? Какие слайдеры и на чём они сделаны?

4) Чем больше иерархия, тем медленнее работает браузер. Потому что например в таком случае .style ul li ul {} браузер сначала проверяет все ul, далее все li, в которых ul и т.д. В идеале лучше всем элементам задавать классы, но это на крупных проектах, а на хомяках можно и так писать .style ul li ul {}

5) Ты про что?

[alexpop]

  On 8/3/2011 at 8:28 PM, psywalker said:

alexpop,

1) Да думаю грузят не очень сильно, ведь это всё равно CSS, а не скрипты.

2) Лучше оставить через CSS

3) Слайдеры? Какие слайдеры и на чём они сделаны?

4) Чем больше иерархия, тем медленнее работает браузер. Потому что например в таком случае .style ul li ul {} браузер сначала проверяет все ul, далее все li, в которых ul и т.д. В идеале лучше всем элементам задавать классы, но это на крупных проектах, а на хомяках можно и так писать .style ul li ul {}

5) Ты про что?

3. Если на картинку мышь навести то выскакивает прозрачный слой и "опадает" 200 мсек. Во всех броузерах это проискодит плавно, а в файрфоксе скачками. Jquery

5. Это я про конструкцию HTML-CSS Дело в том, что я раньше ни с кем не советовался, делал все так как считал "правильным", поэтому не знаю, насколько чистый код и т.п.

[psywalker]

  On 8/3/2011 at 8:32 PM, alexpop said:

  On 8/3/2011 at 8:28 PM, psywalker said:

alexpop,

1) Да думаю грузят не очень сильно, ведь это всё равно CSS, а не скрипты.

2) Лучше оставить через CSS

3) Слайдеры? Какие слайдеры и на чём они сделаны?

4) Чем больше иерархия, тем медленнее работает браузер. Потому что например в таком случае .style ul li ul {} браузер сначала проверяет все ul, далее все li, в которых ul и т.д. В идеале лучше всем элементам задавать классы, но это на крупных проектах, а на хомяках можно и так писать .style ul li ul {}

5) Ты про что?

3. Если на картинку мышь навести то выскакивает прозрачный слой и "опадает" 200 мсек. Во всех броузерах это проискодит плавно, а в файрфоксе скачками. Jquery

5. Это я про конструкцию HTML-CSS Дело в том, что я раньше ни с кем не советовался, делал все так как считал "правильным", поэтому не знаю, насколько чистый код и т.п.

3. Хм...ну может быть, хотя странно, последний фокс вроде бы уже более подвижный, чем старые.

5. А ты лучше покажи код и задай конкретный вопрос, тогда тебе быстрей ответят.

[alexpop]

Вопрос конечно открытый и опциональный. Но вот, например начало CSS

:focus {outline:0;}
.clear {clear:both;	visibility:hidden;	height:0;}
.clearfix {zoom:1;}
.clearfix:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
/* DOC general ———————————-*/
html {height:100%;}
body {font:81.2%/140% Arial, sans-serif; background:#F8F8F8; margin:0; height:100%; color:#444;}
a:link, a:visited {text-decoration:none; color:#333;}
a:hover {text-decoration:underline; color:#000;}
a:active {text-decoration:none; color:#555;}
h1,h2,h3,h4,h5,h6 {font-family:'Segoe UI', Arial, sans-serif;}
h1 {font-size:1em; margin:0;color:#777;}
h2 {font-size:25px; font-weight:normal; line-height:110%; margin:1em 0 .5em; color:#000;}
h3 {font-size:19px; line-height:120%; margin:1em 0 .5em; color:#000;}
h4 {font-size:16px; margin:1em 0 .5em;}
h5, h6 {font-size:1em; margin:.5em 0;}
p {margin:0 0 .75em 0;}
ol {margin:.25em 0 .75em; padding:0 0 0 3em;}
ul {margin:0; padding:0; list-style:none;}
dl {margin:.25em  0 .75em;}
dt {font-weight:bold; }
dd {margin-left:1.5em;}
table {border-collapse:collapse; border-spacing:0; text-align:left;}
img {border:none;}
/* Forms */
label { font-weight:bold; }
fieldset { padding:0 1.4em 1.4em 1.4em; margin:0 0 1.5em 0; border:1px solid #eee; }
legend { font-weight:bold; font-size:1.2em; margin-top:-0.2em; margin-bottom:1em; }
fieldset { padding-top:1.4em; } 
legend { margin-top:0; margin-bottom:0;}

/* Custom Typo ———————————-*/
img.left {float:left}
img.right {float:right}
.topzero {margin-top:0;}/* to reset headers top margin */
.title {
	display:block;
	font-size:107.69%;
	font-weight:bold;
	text-transform:uppercase;
}
/* .txt suffix for typography content in a text blocks */
.txt ul li {
	background:url("img/bg-ul-1.png") no-repeat scroll 0 4px transparent;
	padding:0 0 0 1.5em;
	margin:0 0 0 1.5em;
	}
	.txt ul li li {
		background-image:url("img/bg-ul-2.png");
}
.txt img {
	margin:5px 20px 7px 0;
}
/* Table, add .txttab class to table */
.txttab {
	border-top:2px solid #666;
	border-bottom:1px solid #ccc;
	line-height:120%;
	width:100%;
	margin-bottom:20px;
	}
	.txttab caption {
		font-weight:bold;
		text-transform:uppercase;
		padding:0.4em 5px;
	}
	.txttab th, .txttab td {
		border-top:1px dotted #ccc;
		padding:0.4em 5px 0.6em;
		vertical-align:top;
}

/* tags */
/* tags shadow and radius */
.bg-green a, .bg-blue a {
	display:block;
	font-size:92.33%;
	line-height:1.4em;
	margin-bottom:1px;
	padding:0 8px 1px;
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	border-radius:2px;
	-moz-box-shadow:1px 1px 1px rgba(0, 0, 0, 0.15);
	-webkit-box-shadow:1px 1px 1px rgba(0, 0, 0, 0.15);
	box-shadow:1px 1px 1px rgba(0, 0, 0, 0.15);
	font-size:92.33%;
	}
	.bg-yellow a, a.bg-yellow {
		background-color:#F2E486;
	}
	.bg-green a, a.bg-green {
		background-color:#E8FFE8;
	}
	.bg-blue a, a.bg-blue {
		background-color:#DDF1FA;
	}
	.bg-yellow a:hover, .bg-green a:hover, .bg-blue a:hover, a.bg-yellow:hover, a.bg-green:hover, a.bg-blue:hover {
		background-color:#555;
		color:#EEE;
		text-decoration:none;
}

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

2. Стараюсь сохранить баланс (не знаю насколько успешно) в наследовании классов. Хотя именно в этом макете я прописывал многие свойства для каждого объекта, но меня подмывает разложить их в разные группы.

3. ID использую только как хуки для скриптов.

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

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

Как-то так...

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

Edited August 4, 2011 by alexpop

[Vlad]

Обрамляйте код тегами [ code ] и [ /code ] без пробелов!