CSS расширения браузеров
Posted in Заметки on ноября 2, 2009
CSS расширения или CSS Extensions содержатся во всех популярных браузерах. Они содержат те свойства, которых нету в утвержденных редакциях CSS, но по мнению создателей браузеров пригодятся web-разработчикам. Среди огромного списка наиболее важными являются свойства из будущего CSS3, которые доступны через индивидуальные префиксы.
Префиксы свойств у всех разные:
-ms-свойство (IE8)
-moz-свойство (FireFox)
-o-свойство (Opera)
-webkit-свойство (Safari, Chrome)
Префикс указывает какому браузеру обрабатывать свойство.
Для примера можно взять полезное свойство закругления углов блока:
-
.block {
-
border-radius: 10px; /* CSS3 свойство */
-
-moz-border-radius: 10px; /* Для FireFox */
-
-webkit-border-radius: 10px; /* Для Safari и Chrome */
-
}
Подробная документация, справочники c примерами по CSS3 свойствам и расширениям:
Проблема с блогом WordPress
Posted in Заметки on сентября 7, 2009
В сети стал распространяться вирус, способный изменять пароль администратора в блогах WP.
Советуем обновиться до версии 2.8.4. Это можно сделать через панель администратора.
Если вы, по каким-либо причинам, не хотите обновляться в автоматическом режиме - можете сделать это вручную. Откройте файл wp-login.php, найдите функцию reset_password() и замените строку
на строку
Следим за новинками
Posted in Заметки on июня 3, 2009
Очень важно следить за новыми технологиями.
И так скоро на экранах:
HTML5 - наиболее подробное описание, таблица поддержки браузерами. Как пример - верстка сайтов
CSS3 - таблица совместимости с современными браузерами.
Web slices - описание и примеры реализации.
Jquery: Множественный фон, текст в колонки
Posted in Работа on мая 17, 2009
Есть некоторые полезные свойства которые включены в спецификацию CSS3, но до сих пор не поддерживаются в полной мере современными браузерами(исключение пожалуй составляет только Safari).
И ничего другого не остается как эмулировать эти свойства через Javascript, а лучше с использованием замечательного фреймворка Jquery.
Первое свойство с которого хотелось бы начать это - множественный фон. Применений этому свойству можно найти массу, например уже приевшиеся закругленные уголки в блоке.
И так для реализации множественного фона нам понадобиться сам jquery 1.3.2 и плагин jquery.background_layers.js
Применяем все следующем образом:
-
<script src=“jquery-1.3.2.min.js” type=“text/javascript”></script>
-
<script src=“jquery.background_layers.js” type=“text/javascript”></script>
-
-
<script type=“text/javascript”>
-
$(function(){
-
$(’#general’).add_layer("url(’/images/header_back.jpg’) no-repeat center top");
-
$(’#general’).add_layer("url(’/images/footer_back.jpg’) no-repeat center bottom");
-
});
-
</script>
-
-
<div id=“general”> множественный фон у этого блока </div>
Второе свойство которое приходится эмулировать это - текст в колонки, по типу газетной верстки. Преимущество этого свойства в том что кусок текста при добавлении на страницу автоматически разбивается на колонки и это не приходится делать вручную.
Для этого понадобиться jquery 1.2.6 и плагин autocolumn.js
Применение этого свойства выглядит так:
-
<script src=“jquery1.2.6.js” type=“text/javascript”></script>
-
<script src=“autocolumn.js” type=“text/javascript”></script>
-
-
<script type=“text/javascript”>
-
$(function(){
-
$(’.column’).columnize({columns:2, width: 300});
-
});
-
</script>
-
-
<div class=“column”>
-
<h1>Текст в колонки</h1>
-
<p>Bonorum has. His u usu in odio offendit theophrastus. Mel labore indoctum cu, ad soleat admodum delicatissimi sed, mei viris tritani ullamcorper eu. Ut vim simul aperiam.</p>
-
</div>
Более подробные примеры работы этого плагина тут
Loading ...Функция разделения чисел по разрядам
Posted in Заметки on марта 3, 2009
Для удобного чтения числа лучше делить по разрядам, т.е. из 1000 сделать 1 000, 1000000 = 1 000 000 и т.д.
В PHP уже есть такая функция
В ней существует непрятная особенность: она не принимает больше 1-го символа в качестве разделителей. Ловкость рук и числа выходят с
-
function print_price($params) {
-
}
Чтобы использовать эту функцию в популярном шаблонизаторе smarty, просто прописываем в доступном месте:
-
$tpl->register_modifier(“print_price”, “print_price”);
Теперь можем писать {$number|print_price} прям в шаблоне.
PROFIT!
Функция правильных числовых окончаний
Posted in Заметки on марта 3, 2009
Иногда маленькая, но хорошая вещь доставляет огромное удовольствие.
Функция, которая ставит числовые окончания слова в нужной форме:
-
function itemWords($col = 0) {
-
if($last == ‘0′ || ($last > ‘4′ && $last <= ‘9′)) {
-
$return = ‘товаров’;
-
}elseif($last == ‘1′){
-
$return = ‘товар’;
-
}else{
-
$return = ‘товара’;
-
}
-
return $return;
-
}
-
//Проверяем
-
enjoy!
Центрирование сайта
Posted in Работа on октября 29, 2008
Есть много способов центрирования сайта по вертикали и горизонтали.
Наиболее популярный это способ с отрицательными маргинами:
-
.site {
-
position:absolute;
-
left:50%;
-
top:50%;
-
width:600px;
-
height:400px;
-
margin:-200px 0 0 -300px;
-
}
Но на практике такой способ не всегда подходит. Например когда нужно, чтобы был вертикальный скроллинг на сайте.
Тогда на помощь приходит старый способ центрирования в ячейке таблицы:
Но этот способ наиболее кроссбраузерный без указания DOCTYPE
Нестандартный скроллинг
Posted in Работа on октября 21, 2008
Иногда по особой просьбе дизайнера необходимо сделать нестандартный скроллинг на сайте. Изменение внешнего вида скроллбаров поддерживают только IE и Opera, но только без указания DOCTYPE. Для полной кроссбраузерности с DOCTYPE нужно использовать яваскрипт, например jquery.
На этом сайте показан как работает один из таких скриптов - http://kelvinluck.com/assets/jquery/jScrollPane/examples.html
Справочник по CSS 3
Posted in Работа on октября 16, 2008
http://zapomni.ru/css/ - хороший справочник по CSS 3
У Hicon теперь есть блог
Привет мир!
Основная цель нашего блога - это публикация материалов на разные темы, которые в силу определенных причин не могут быть опубликованы в новостях. Через блог мы расскажем вам о том над чем мы сейчас работаем, о видении развития веб-девелопмента, о том какие технологии мы используем и поделимся своим опытом на практических примерах.