Съвети и трикове за CSS оптимизация

Една от основните движещи сили в работата по даден проект е яснотата на кода. Колкото по-правилен, по-разбираем, по-изчистен и подреден е той, толкова по-добре за всички замесени в проекта. Естествено, на пръв поглед удобството е най-вече за вас, но един добре написан код може да бъде модифициран лесно и от трети лица за в бъдеще, а това от своя страна спестява време и пари.

Оптимизацията не винаги може да бъде на 100%, но с този урок ще се опитам да помогна на “прохождащите” писачи на CSS да изградят навици или просто да си харесат някоя завъртяна техника, с която да оптимизират своя CSS файл. Имайте едно на ум, че всъщност оптимизацията на CSS-а започва още със структурирането на HTML документа!

Ще се опитам да не бъда пристрастен и да сравня плюсовете и минусите на всеки метод, така че да откриете подходящия за вас. Трябва да знаете, че не винаги писането по един и същ начин е най-оптимално и точно поради тази причина е добре да комбинирате техниките за да получите желания резултат. Нека пристъпим към действие!

прочети нататък »

Лепкав “Sticky” Footer само с CSS

Разглеждал съм доста уроци из мрежата за това как да си направим така наречения “лепкав” футър. Много от тях обаче или имаха доста излишен код или бяха куци, като изпълнение или изобщо не сработваха на някои места.

Всъщност подобно упражнение ми се наложи да правя за първи път преди няколко години, когато никой не подозираше, че е възможно да се получи само с CSS. Естествено винаги можем да вкараме Javascript или някоя JS библиотека, но аз съм и ще си остана фен на простичките неща, за това в този урок ще разгледаме варианта, в който може да създадете така наречения Sticky Footer само с CSS.

прочети нататък »

Промяна на цвета при селектиране на текст само с CSS

Сигурен съм, че доста от вас са виждали на много сайтове интересната глезотийка, с която при селекция на определен текст, той променя цвета си или пък фона зад него. Начинът, по който се прави това е елементарен и не е нещо ново, но въпреки това доста хора и до този момент продължават да ме питат.

changeselectioncolors1

Ето и решението, което понякога може да се окаже наистина полезно, особено ако сте перфекционист и държите абсолютно всичко в дизайна ви да се вписва на 100%. Има и случаи, при които фонът за четене не е приятен и кофти чувството се засилва, виждайки лоша комбинация от цветове когато селектирате текста. Рядко е, но се случва.


/* Opera, Chrome, Safari, IE9+ */
::selection { background: #6bcf44; color: #fff; } 

/* Firefox */
::-moz-selection { background: #6bcf44; color: #fff; } 

Имайте предвид, че единствените пропъртита, които може да сложите на тези селектори са color, background и background-color. Освен това въпросните селектори остават непознати, както за архаичния Internet Explorer 6, така и за по-новите версии 7 и 8. На останалите браузъри няма проблем, само за Opera ще трябва да ползвате по-актуална версия (над 9.5).

Хоризонтално и вертикално центриране на елемент с CSS

В този урок ще ви покажа как да центрирате един HTML елемент не само по хоризонтала, но и по вертикала. Ако тръгнете да се ровите из нета ще намерите много решения, които имат редица плюсове и минуси, но тук ще стане въпрос за най-лесния и бърз начин да го сторите.

На повечето от вас е ясно, че за да центрираме един елемент по хоризонтала (било то div, span, a, ul и пр.) е необходимо да му задаем ширина и margin: 0 auto. В някои по-специални ситуации, наложени от по-специални браузъри, трябва да добавим text-align: center и така нещата се получават, но в 99% от случаите ви е необходимо само margin: 0 auto. По-интересното е как да центрирате елемента по вертикалата, така че да стои винаги в средата на браузъра (или родителския елемент, ако пожелаете). Основният проблем идва от различните резолюции, на които се гледа сайтът. Точно за това ни трябва нещо универсално, което не е свързано с условности и изчисляване на безкрайни комбинации.

За примера днес ще направим нещо съвсем простичко, за да ви стане напълно ясно за какво говоря. Ще използваме един div, който ще центрираме спрямо екрана. Няма да пишем никакъв javascript. Изображения също не съм ползвал, тъй като, както казах се стремя да е максимално опростено.

Стъпка 1: HTML

Тук ни трябва само един div, който съм кръстил “centered”. Всичко останало е стандартно и е написано, за да го копирате и да имате валиден документ.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta charset="UTF-8"/>
<link rel="stylesheet" href="css/style.css" type="text/css" />
<title>Хоризонтално и вертикално центриране на елемент с CSS</title>
</head>
<body>	
	<div id="centered"></div>
</body>
</html>

Стъпка 2: CSS

Вече имаме създаден div и нашата задача е да го центрираме, като за целта ще ползваме абсолютното позициониране. За хората, които не са наясно какво е това ще поясня с две думи. В CSS има няколко типа позициониране – relative, absolute, fixed и static. За основите им може да прочетете тук. В нашия случай ни интерсува поведението на relative и absolute. По принцип когато един елемент е абсолютно позициониран, то той излиза от нормалния “поток” на HTML-a, ако мога да така да се изразя и обикновено застава над всички в горния ляв ъгъл на екрана. Сега вие може да го местите където си пожелаете, благодарение на свойствата top, left, bottom и right. Това е страхотно, нали? Да, но на различните резолюции, елементът не винаги е там, където трябва да бъде. Тук в помощ идва релативната позиция. Когато един div е позициониран релативно и в него има друг div, но вече абсолютно позициониран, то абсолютният се води по поставените граници от релативния. Така например ако имате Facebook икона в лявата колона, но искате я да позиционирате малко извън нея, трябва да зададете position: relative на лявата колона, за да може иконата да се води по нея, а не според екрана. В нашия случай обаче ни е нужно точно обратното – трябва да позиционираме спрямо екрана, ето защо не пишем допълнителни релативни div-ове. Напишете следния код.

body { margin: 0; padding: 0; background: #FFF; }

#centered {
	width: 300px;
	height: 300px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -150px;
	margin-left: -150px;
	background: #888;
	border: 1px solid #444;
}

За body, настройките са стандартни, така че не им обръщаме внимание и се концентрираме на “centered”. Виждате, че съм задал ширина и височина на div-a, както и бекграунд и бордър, само за да видим къде е. След това добавям position: absolute, за да го позиционирам спрямо екрана и казвам да бъде на 50% (половината) отгоре и отляво. Така обаче позиционирам външните краища на div-a, а не самия център. Даже си поиграх малко да ви го илюстрирам по-добре. Приемете, че бялото пространство е браузъра.

Vertically & Horizontally Centering a DIV, Fig. 1

Както виждате от фигурата това съвсем не е център. За целта трябва посредством отрицателни стойности на марджина да “избутаме” или по-точно върнем div-a нагоре и наляво. За да намерим центъра му трябва да разделим страните му на две, т.е. 300px/2 = 150px. В случая имам квадрат, така че и двата марджина са с една и съща стойност, но важното е да запомните, че страните се делят на две… то си е и логично всъщност. Сега добавете отрицателните марджини към кода, за да получим желания резултат.

#centered {
	width: 300px;
	height: 300px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -150px;
	margin-left: -150px;
	background: #888;
	border: 1px solid #444;
}

Имаме си напълно центриран div. Изтествайте, като минимизирате браузъра и го поразтеглите насам-натам.

Vertically & Horizontally Centering a DIV, Fig. 1

Това е цялата философия. На този принцип може да си направите Login скрийн или пък да вадите важни съобщения… общо взето приложенията са много и ще го усетите с времето.

Урочето стана малко по-дълго от очакваното, защото се засилих да обяснявам по-подробно нещата и поне се надявам да сте разбрали всичко. Ако има въпроси питайте, ще се радвам да помогна.

Simple Drop Down Menu w/ CSS & jQuery

Целта на днешното занятие е да създадем едно семпло, но много еластично от към функционалност меню. Под семпло имам предвид само външния вид, като естествено вие може да си го промените както пожелаете. За сметка на това обаче менюто ще поддъжа безброй подменюта, което е и големият плюс, а самото добавяне на ново подменю става с копирането на няколко реда код. И за финал, за да е по-мазничко съм добавил малко jquery ефектчета.

Менюто е тествано и работи на всички по-популярни браузъри – Firefox 3.6, Chrome 4, Opera 10, Safari 4, IE 6, IE 7 и IE 8. Освен това може да се ползва за всичко – не е задължително да е главно меню. С малко пипане може да стане хоризонтална навигация, а ако го обърнете на 180 градуса може да се получи помощна лента, забита в дъното на екрана в стил Facebook. Изобщо възможностите са доста и се постарах да покрия колкото се може повече. Ако искате да ровичкате обаче, да предупредя, че трябва да имате поне минимални познания по CSS, HTML и JS, тъй като има някои тънкости. Разбира се винаги може и да попитате, ще се постарая да отговоря. Освен това, ако на някой не му харесва нещо или се сеща за по-културно решение – приемам всякакви идеи и корекции!

Стъпка 1: HTML

Той представлява един съвсем прост и елементарен списък с няколко поднива, които символизират подменютата. За всеки случай съм копирал и целия работен документ за тези, които не знаят къде да го поставят.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta charset="UTF-8"/>
<link rel="stylesheet" href="css/style.css" type="text/css" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/simple-dropdown-menu.js"></script>
<title>Simple Drop Down Menu w/ CSS & jQuery by RIP</title>
</head>
<body>

	<div id="menu">
		<div id="menu_r">
			<div id="menu_l">
				<ul class="main">
					<li><a id="home" href="#">Начало</a></li>
					<li>
						<a href="#">Новини</a>
						<ul class="sub">
							<li><a href="#">Свят</a></li>
							<li>
								<a href="#">България</a>
								<ul class="sub">
									<li><a href="#">София</a></li>
									<li><a href="#">Пловдив</a></li>
									<li><a href="#">Варна</a></li>
									<li>
										<a href="#">Бургас</a>
										<ul class="sub">
											<li><a href="#">Риби</a></li>
											<li><a href="#">Жълъди</a></li>
											<li><a href="#">Кифли</a></li>
											<li><a href="#">Патладжан</a></li>
										</ul>
									</li>
								</ul>
							</li>
							<li>
								<a href="#">Наука</a>
								<ul class="sub">
									<li><a href="#">Космос</a></li>
									<li><a href="#">Клониране</a></li>
								</ul>
							</li>
							<li><a href="#">Спорт</a></li>
						</ul>
					</li>
					<li>
						<a href="#">Статии</a>
						<ul class="sub">
							<li><a href="#">Кратки</a></li>
							<li><a href="#">Дълги</a></li>
						</ul>
					</li>
					<li><a href="#">Каталог</a></li>
					<li><a href="#">Архив</a></li>
					<li><a href="#">Форум</a></li>
					<li><a href="#">Блог</a></li>
				</ul>
			</div>
		</div>
	</div>

</body>
</html>

На какво трябва да се обърне внимание тук? Като за начало погледнете си пътищата към javascript, image и css файловете. Ако ги местите и се чудите защо не работят, вероятно това е причината.

Стъпка 2: CSS

Тъй като целта ни е да направим едно безкрайно меню, CSS-а е малко по-дълъг от обикновено. Разбира се ако му накичите още някоя глезотийка редовете ще скочат, но това в крайна сметка няма значение… просто не се заблуждавайте, че е нещо много сложно. За урока съм го стилизирал по-семпличко и без много изображения, за да схванете логиката, а всеки, който иска може да си добави картинки и в подменютата. Между другото за по-голяма оптимизация съм направил sprite от картинките на менюто. Sprite с две думи, освен популярната напитка, представлява една огромна картинка (например хвърлете едно око на YouTube-ската тук), която се зарежда веднъж и впоследствие с помощта на CSS и background-position, ние позиционираме необходимата ни част на необходимото място. Прави се предимно с цел оптимизация, но много трябва да се внимава, защото е малко пипкава работа, особено под по-старите браузъри.

body { margin: 0; padding: 0; font: 11px/1.3em Tahoma, Arial, Verdana, sans-serif; background: #FFF; color: #666; }

#menu { background: url(../img/menu.png) repeat-x left -72px; width: 800px; margin: 100px auto; }
#menu_r { background: url(../img/menu.png) no-repeat right -36px; }
#menu_l { background: url(../img/menu.png) no-repeat left 0; height: 36px; }
#menu ul { margin: 0; padding: 0; list-style: none; }

ul.main li {
	position: relative;
	float: left;
	background: url(../img/menu_li.png) no-repeat right top;
	padding: 0 3px 0 0;
}

ul.main li a, ul.main li a:link, ul.main li a:visited {
	float: left;
	padding: 0 25px;
	color: #666;
	font-size: 12px;
	height: 36px;
	line-height: 36px;
	font-weight: 700;
	outline: none;
	text-decoration: none;
	text-shadow: 1px 1px 0 #fff;
}

ul.main li a:hover { color: #00b2fc; background: url(../img/menu.png) repeat-x left -108px; }
ul.main li a span.arrow { color: #999; }
ul.main li a#home:hover { background: url(../img/home_hover.png) no-repeat left top; }

ul.main li ul.sub {
	display: none;
	position: absolute;
	top: 36px;
	left: -2px;
	width: 200px;
	border-left: 1px solid #d9d9d9;
	border-right: 1px solid #d9d9d9;
}

ul.main li ul.sub li {
	position: relative;
	padding: 0;
	background: none;
}

ul.main li ul.sub li a, ul.main li ul.sub li a:link, ul.main li ul.sub li a:visited  {
	float: none;
	display: block;
	width: 180px;
	border-bottom: 1px solid #d9d9d9;
	height: 30px;
	line-height: 30px;
	padding: 0 10px;
	font-size: 11px;
	background: #f8f8f8;
}

ul.main li ul.sub li a:hover {
	color: #666;
	background: #efefef;
}

ul.main li ul.sub li ul.sub {
	position: absolute;
	top: -1px;
	left: 200px;
	border-top: 1px solid #d9d9d9;
}

Тук е трудно, а и безсмислено да се коментира кой ред какво прави, защото нещата са навързани. За това пак – ако има въпроси и предложения, насреща съм.

Стъпка 3: jQuery

Тъй като jQuery е една от най-добрите Javascript библиотеки, аз съм я използвал с актуалната й версия 1.4.2. Приложил съм всички файлове в архива за сваляне, но ако имате желание да го свалите отделно, ето линк за компресираната версия или за отворения файл, по който може да човъркате.

Тук JQ се ползва много малко и буквално, както виждате са 10 реда, но създава приятен ефект.

$(document).ready(function ()
	{
		$('.main li:has(ul) > a').addClass('more');
		$('a.more').append('<span class="arrow">&nbsp;&nbsp;&raquo;</span>');
		$('.main li').hover(function () {
			$(this).find('ul:first').stop(true, true).animate({opacity: 'toggle', height: 'toggle'}, 200).addClass('active_list');
		}, function () {
			$(this).children('ul.active_list').stop(true, true).animate({opacity: 'toggle', height: 'toggle'}, 200).removeClass('active_list');
		});
	});

Идеята тук е да търсим всяко LI, което е родителски елемент на A и съдържа в себе си UL. Така ако е изпълнено условието на линка се добавя клас “more”, на който клас на следващия ред добавяме стрелкички до името на бутона. Това го правим с цел да се разбере, че този бутон съдържа в себе си информация и подтиква юзъра да провери каква е тя.

След това създаваме плавния ефект на Slide Up & Down. Търсим всеки първи списък и му пускаме анимация, която го слайдва надолу и му добавя клас “active_list”. След това търсим списък с вече добавения клас “active_list” и поставяме условие, ако мишока не е върху него да се изпълни анимацията за затваряне или иначе казано прибиране нагоре. След това просто изтриваме класа “active_list” и всичко е готово.

Накратко е това. В javascript файла, който се намира в архива съм закоментирал ред по ред кое какво прави мааалко по-разширено. Нещата не са никак сложни, стига да имате малко понятие.

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

Contact
captcha