Jump to content
  • 0

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


alexpop
 Share

Question

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

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

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

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

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

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

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

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

Link to comment
Share on other sites

5 answers to this question

Recommended Posts

  • 0

alexpop,

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

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

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

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

5) Ты про что?

Link to comment
Share on other sites

  • 0

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 Дело в том, что я раньше ни с кем не советовался, делал все так как считал "правильным", поэтому не знаю, насколько чистый код и т.п.

Link to comment
Share on other sites

  • 0

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. А ты лучше покажи код и задай конкретный вопрос, тогда тебе быстрей ответят.

Link to comment
Share on other sites

  • 0

Вопрос конечно открытый и опциональный. Но вот, например начало 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 by alexpop
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy