IT — CSS 3: box-sizing
В CSS3 появилось замечательно свойство box-sizing. Это свойство объясняет браузеру каким образом следует толковать значения height и width. В обычном состоянии (box-sizing: content-box) эти величины влияют только на размеры содержимого блока, но если задать значение border-box, то при рассчёте также будут учитываться padding и border. Чрезвычайно нужное свойство, которое, к сожалению, не поддерживается в IE6-7. Для Firefox следует использовать -moz-box-sizing, а для старых webkit-ов -webkit-box-sizing. А теперь две ложки дёгтя, которые сильно ограничивают применение этого свойства в некоторых ситуациях:
-
Mozilla Firefox && min-height. Если текущее значение height-а задаётся свойством min-height, а не height (т.е. height не задан вовсе, либо он меньше, чем min-height), то огнелис напрочь забывает про -moz-box-sizing. Полагаю, что это баг, который в будущем починят.
- Google Chrome && display: table-cell. Блоки имеющие display: table-* и им подобные не используют box-sizing. Т.е. таблицы и блоки с вертикальным выравниванием "пролетают".
IT — onKeyDown для DIV
Эта маленькая заметка посвящена небольшому трюку, который позволяет добиться работоспособности события onkeydown для тега <div>. Дело в том, что код вроде:
$('#test').keydown( function(e){ console.log( e.keyCode ); } );
Не сработает для HTML аля <div id="test">test</div>, а всё потому, что <div> не может получить focus. Простое добавление аттрибута tabindex="0" проблему решает.
IT — Внедрение CSS на лету
Столкнулся с задачей — внедрить "на лету", при помощи javascript, CSS-код на страницу. Простое решение "в лоб" не заработало в IE:
$('head').append( $( '<style>', { type: 'text/css' } ).html( 'css код' ) );
var style = $('<style>', { type: 'text/css' } ).get(0);
if( style.styleSheet ) // IE
{
style.styleSheet.cssText = css_code;
}
else
{
$( style ).html( css_code );
}
$('head').append( style );
IT — jQuery().ready
Многие используют $( document ).ready( fn ) или упрощённую запись $( fn ) для выполнения js-кода по окончанию загрузки DOM-модели страницы. Это удобно и кроссбраузерно, однако результат выполнения следующего кода:
<html>
<head>
<title>Test .ready</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"
type="text/javascript"></script>
<script>$( function() { error.error + 'error'; /* Error :) */ } ); </script>
<script>
$( function() { alert( 'All right' ); } );
alert(2);
</script>
</head>
<body> </body>
</html>
может вас разачаровать. Дело в том, что если одна из поставленных в очередь на .ready функций "заглючит", остальные не выполнятся. Вы не увидете 'All right', только '2'. Т.е. какой-либо мелочный глюк в одном модуле может привести к полной неработоспособности javascript-а на странице.
IT — Потерянный $_POST
Внедряя на crew.kz робокассу, я столкнулся с тем, что в реальных, боевых условиях, на сервер приходят "не правильные ответы" от платёжного сервиса. Дело в том, что $_POST был пуст, в то время как настройки мерчанта были указаны правильные. Проблема оказалась проста — в настройках аккаунта я указал в качестве адреса http://crewative.ru, а не http://www.crewative.ru, что приводило к 301-редиректу и потери POST-данных. Такая вот мелкая оплошность, может стоить нескольких часов поиска :)