В этом посте хотелось сказать парочку слов об известных мне некоторых скрытых и тем не менее весьма интересных возможностях современных популярных веб браузеров: Chrome, FireFox, Opera. Я привел в пример три основных, естественно все ниже описанные мной «фичи» относятся и ко множеству остальных браузеров построенных да движках этих. Сразу скажу, что все эти «фишки» уже сто лет как всем известны и поэтому вы можете о них уже знать, но для тех кто еще не в курсе я все таки допишу этот пост.
Добро пожаловать под кат…
Текстовый редактор в браузере
Итак, давайте приступим к изучению «новых» возможностей наших, давно полюбившихся, веб обозревателей. Для начала давайте сделаем из браузера обычный текстовый редактор наподобие блокнота, ведь мало ли какие ситуации бывают в жизни, а у вас под рукой нет нужной программы для записи текстовой информации с последующим сохранением её на носитель. В этом нам поможет специальная команда data:text/html, <html contenteditable> при помощи которой браузер магическим образом превратится в обычный блокнот. При том, что это блокнот будет весьма полезен в правильном написании текста без ошибок, ведь он будет подобно word`у подчеркивать красной линией те слова, которые написаны не правильно. Безусловно в этом случае словарь правильных слов каждый браузер выбирает свой, зачастую это словарь взятый из операционной системы. Но все же это лучше чем ничего, ведь обычные программы блокноты иной раз даже не удосуживаются просто проверить орфографию текста якобы из-за того, что это очень мощная функция и доступна она только в платных программных продуктах наподобие word, а тут все за бесплатно.
Понятное дело, что этот код можно сколь угодно улучшить и сделать из него чуть ли не профессиональный javascript web редактор наподобие популярного TinyMCE, который используется почти в каждой CMS как редактор материалов по умолчанию. Так например можно получить красивый редактор
- Шрифт 1
data:text/html, <textarea style="font-size: 1.5em; width: 100%; height: 100%; border: none; outline: none" autofocus /> - Шрифт 2
data:text/html;charset=utf-8, <title>TextEditor</title><body contenteditable style="font-size:2rem;line-height:1.4;max-width:60rem;margin:0 auto;padding:4rem;" spellcheck="false"> - Или даже со стильным заголовком, который тоже можно отредактировать к примеру по названию содержимого
data:text/html;charset=utf-8, <title>Текстовый редактор</title><body contenteditable style="font-size:2rem;font-family:monaco;line-height:1.4;max-width:60rem;margin:0 auto;padding:4rem;" spellcheck="false"><h1>Редактор текста</h1><p>Писать тут.
Таким образом получаем на выходе редактор с разметкой и красивым шрифтом. Или же можно еще добавить к примеру иконку для полноты картины, а так же изменение фона при вводе данных
data:text/html, <html><head><style type="text/css"> html { font-family: "Open Sans" } * { -webkit-transition: all linear 1s; }</style><script>window.onload=function(){var e=false;var t=0;setInterval(function(){if(!e){t=Math.round(Math.max(0,t-Math.max(t/3,1)))}var n=(255-t*2).toString(16);document.body.style.backgroundColor="#ff"+n+""+n},1e3);var n=null;document.onkeydown=function(){t=Math.min(128,t+2);e=true;clearTimeout(n);n=setTimeout(function(){e=false},1500)}}</script></head><body contenteditable style="font-size:2rem;line-height:1.4;max-width:60rem;margin:0 auto;padding:4rem;">
В общем, как вы поняли, экспериментировать можно сколь угодно бесконечно долго, суть от этого не изменится — мы имеем весьма не плохой графический текстовые редактор в web браузером в одном флаконе. Что интересно, так это то, что Microsoft Internet Explorer просто на отрез отказывается превращаться в текстовый редактор, видимо для него это сильное унижение, в этом он опять же отделяется от великолепной тройки.
Поговаривают, что в Линуксе можно еще круче:
echo "vi" | perl -e '$??s:;s:s;;$?::s;;=]=>%-{<-|}<&|`{;;y; -/:-@[-`{-};`-{/" -;;s;;$_;see'
Сам не пробовал т.к. писал под MS Windows XP и выходить из неё дабы зайти в Ubuntu и посмотреть было не охота.
Думаю на этом обзор скрытых возможностей обозревателей можно завершить, т.к. пост получился и без того не малым. Другие, не менее, интересные функции браузеров читайте в следующих статьях этой категории.