Formularze i CSS 3

CSS 3 dostarcza wiele nowości, które z pewnością ułatwią i przyspieszą pracę nad atrakcyjnymi wizualnie projektami. Mimo, że CSS 3 jest jeszcze w fazie implementacji przez wszystkich najważniejszych producentów przeglądarek, warto powoli zaznajamiać się z możliwościami tej technologii ;)

W nowej wersji CSS będziemy mogli w końcu dowolnie edytować wygląd pól typu radio i checkbox bez utycia JavaScriptu – tak na marginesie, nie rozumiem czemu dopiero teraz deweloperzy umożliwią to. Inną przydatną nowością jest pseudoklasa :focus.

Żeby nie było tylko teoretycznie zamieszczam kod przykładowego formularza kontaktowego z wykorzystaniem CSS 3:

…

Imię i nazwisko:

Adres e-mail:

Treść:

</p>
<div class="printfriendly pf-alignright"><a href="#" rel="nofollow" onclick="window.print(); return false;" class="noslimstat"><span class="printfriendly-text2 printandpdf"><img style="border:none;margin-right:6px;" src="http://cdn.printfriendly.com/pf-print-icon.gif" width="16" height="15" alt="Print Friendly Version of this page" />Print <img style="border:none;-webkit-box-shadow:none; box-shadow:none;margin:0 6px" src="http://cdn.printfriendly.com/pf-pdf-icon.gif" width="12" height="12" alt="Get a PDF version of this webpage" />PDF</span></a></div></div></div><div id="campaign-after-post"></div>
        <script>
            var config={};
            config.type='text';
                config.domain= 'lukasz-socha.pl';
                config.tags=' CSS 3, dla początkujących, formularze ';
            config.pageUrl='https://lukasz-socha.pl:443/css/formularze-i-css-3/';
            config.userAgent= 'CCBot/2.0 (https://commoncrawl.org/faq/)';
            config.referer= '';
                getCampaign(jQuery("#campaign-after-post"), config);
        </script>
        <footer class="entry-footer"><span class="blog-tags minor-meta"><strong>Tagi:</strong><span> <a href="https://lukasz-socha.pl/tag/css-3/" rel="tag">CSS 3</a>, <a href="https://lukasz-socha.pl/tag/dla-poczatkujacych/" rel="tag">dla początkujących</a>, <a href="https://lukasz-socha.pl/tag/formularze/" rel="tag">formularze</a></span></span><div class='av-share-box'><h5 class='av-share-link-description'>Udostępnij wpis swoim znajomym</h5><ul class='av-share-box-list noLightbox'><li class='av-share-link av-social-link-facebook' ><a target='_blank' href='http://www.facebook.com/sharer.php?u=https://lukasz-socha.pl/css/formularze-i-css-3/&t=Formularze%20i%20CSS%203' aria-hidden='true' data-av_icon='' data-av_iconfont='entypo-fontello' title='' data-avia-related-tooltip='Share on Facebook'><span class='avia_hidden_link_text'>Share on Facebook</span></a></li><li class='av-share-link av-social-link-twitter' ><a target='_blank' href='https://twitter.com/share?text=Formularze%20i%20CSS%203&url=https://lukasz-socha.pl/?p=1229' aria-hidden='true' data-av_icon='' data-av_iconfont='entypo-fontello' title='' data-avia-related-tooltip='Share on Twitter'><span class='avia_hidden_link_text'>Share on Twitter</span></a></li><li class='av-share-link av-social-link-gplus' ><a target='_blank' href='https://plus.google.com/share?url=https://lukasz-socha.pl/css/formularze-i-css-3/' aria-hidden='true' data-av_icon='' data-av_iconfont='entypo-fontello' title='' data-avia-related-tooltip='Share on Google+'><span class='avia_hidden_link_text'>Share on Google+</span></a></li><li class='av-share-link av-social-link-pinterest' ><a target='_blank' href='http://pinterest.com/pin/create/button/?url=https%3A%2F%2Flukasz-socha.pl%2Fcss%2Fformularze-i-css-3%2F&description=Formularze%20i%20CSS%203&media=https%3A%2F%2Flukasz-socha.pl%2Fwp-content%2Fuploads%2F2014%2F03%2Fpost_ico2.png' aria-hidden='true' data-av_icon='' data-av_iconfont='entypo-fontello' title='' data-avia-related-tooltip='Share on Pinterest'><span class='avia_hidden_link_text'>Share on Pinterest</span></a></li><li class='av-share-link av-social-link-linkedin' ><a target='_blank' href='http://linkedin.com/shareArticle?mini=true&title=Formularze%20i%20CSS%203&url=https://lukasz-socha.pl/css/formularze-i-css-3/' aria-hidden='true' data-av_icon='' data-av_iconfont='entypo-fontello' title='' data-avia-related-tooltip='Share on Linkedin'><span class='avia_hidden_link_text'>Share on Linkedin</span></a></li><li class='av-share-link av-social-link-tumblr' ><a target='_blank' href='http://www.tumblr.com/share/link?url=https%3A%2F%2Flukasz-socha.pl%2Fcss%2Fformularze-i-css-3%2F&name=Formularze%20i%20CSS%203&description=CSS%203%20dostarcza%20wiele%20nowo%C5%9Bci%2C%20kt%C3%B3re%20z%20pewno%C5%9Bci%C4%85%20u%C5%82atwi%C4%85%20i%20przyspiesz%C4%85%20prac%C4%99%20nad%20atrakcyjnymi%20wizualnie%20projektami.%20Mimo%2C%20%C5%BCe%20CSS%203%20jest%20jeszcze%20w%20fazie%20implementacji%20przez%20wszystkich%20najwa%C5%BCniejszych%20producent%C3%B3w%20przegl%C4%85darek%2C%20warto%20powoli%20zaznajamia%C4%87%20si%C4%99%20z%20mo%C5%BCliwo%C5%9Bciami%20tej%20technologii%20%3B%29%20W%20nowej%20wersji%20CSS%20b%C4%99dziemy%20mogli%20w%20ko%C5%84cu%20dowolnie%20edytowa%C4%87%20wygl%C4%85d%20p%C3%B3l%20typu%20radio%20i%20checkbox%20%5B%E2%80%A6%5D' aria-hidden='true' data-av_icon='' data-av_iconfont='entypo-fontello' title='' data-avia-related-tooltip='Share on Tumblr'><span class='avia_hidden_link_text'>Share on Tumblr</span></a></li><li class='av-share-link av-social-link-vk' ><a target='_blank' href='http://vk.com/share.php?url=https://lukasz-socha.pl/css/formularze-i-css-3/' aria-hidden='true' data-av_icon='' data-av_iconfont='entypo-fontello' title='' data-avia-related-tooltip='Share on Vk'><span class='avia_hidden_link_text'>Share on Vk</span></a></li><li class='av-share-link av-social-link-reddit' ><a target='_blank' href='http://reddit.com/submit?url=https://lukasz-socha.pl/css/formularze-i-css-3/&title=Formularze%20i%20CSS%203' aria-hidden='true' data-av_icon='' data-av_iconfont='entypo-fontello' title='' data-avia-related-tooltip='Share on Reddit'><span class='avia_hidden_link_text'>Share on Reddit</span></a></li><li class='av-share-link av-social-link-mail' ><a  href='mailto:?subject=Formularze%20i%20CSS%203&body=https://lukasz-socha.pl/css/formularze-i-css-3/' aria-hidden='true' data-av_icon='' data-av_iconfont='entypo-fontello' title='' data-avia-related-tooltip='Share by Mail'><span class='avia_hidden_link_text'>Share by Mail</span></a></li></ul></div></footer><div class='post_delimiter'></div></div><div class='post_author_timeline'></div></article><div class='single-big'></div><div class ='related_posts av-related-style-tooltip'><h5 class='related_title'>Może zainteresują ciebie także te wpisy:</h5><div class='related_entries_container '><div class='av_one_eighth no_margin  alpha relThumb relThumb1 relThumbOdd post-format-standard related_column'>
	<a href='https://lukasz-socha.pl/php/skrypt-do-sprawdzania-dni-roboczych/' class='relThumWrap noLightbox' title='Skrypt do sprawdzania dni roboczych'>
	<span class='related_image_wrap' data-avia-related-tooltip="Skrypt do sprawdzania dni roboczych"><img width="81" height="81" src="https://lukasz-socha.pl/wp-content/uploads/2014/03/post_ico4.png" class="attachment-square size-square wp-post-image" alt="post_ico4" title="post_ico4" srcset="https://lukasz-socha.pl/wp-content/uploads/2014/03/post_ico4.png 81w, https://lukasz-socha.pl/wp-content/uploads/2014/03/post_ico4-80x80.png 80w, https://lukasz-socha.pl/wp-content/uploads/2014/03/post_ico4-36x36.png 36w" sizes="(max-width: 81px) 100vw, 81px" />	<span class='related-format-icon '><span class='related-format-icon-inner' aria-hidden='true' data-av_icon='' data-av_iconfont='entypo-fontello'></span></span>	</span><strong class='av-related-title'>Skrypt do sprawdzania dni roboczych</strong>	</a></div><div class='av_one_eighth no_margin   relThumb relThumb2 relThumbEven post-format-standard related_column'>
	<a href='https://lukasz-socha.pl/php/mvc-w-praktyce-z-composer-tworzymy-system-artykulow-cz-3/' class='relThumWrap noLightbox' title='MVC w praktyce z composer – tworzymy system artykułów. cz. 3'>
	<span class='related_image_wrap' data-avia-related-tooltip="MVC w praktyce z composer – tworzymy system artykułów. cz. 3"><img width="81" height="81" src="https://lukasz-socha.pl/wp-content/uploads/2014/03/post_ico4.png" class="attachment-square size-square wp-post-image" alt="post_ico4" title="post_ico4" srcset="https://lukasz-socha.pl/wp-content/uploads/2014/03/post_ico4.png 81w, https://lukasz-socha.pl/wp-content/uploads/2014/03/post_ico4-80x80.png 80w, https://lukasz-socha.pl/wp-content/uploads/2014/03/post_ico4-36x36.png 36w" sizes="(max-width: 81px) 100vw, 81px" />	<span class='related-format-icon '><span class='related-format-icon-inner' aria-hidden='true' data-av_icon='' data-av_iconfont='entypo-fontello'></span></span>	</span><strong class='av-related-title'>MVC w praktyce z composer – tworzymy system artykułów. cz. 3</strong>	</a></div><div class='av_one_eighth no_margin   relThumb relThumb3 relThumbOdd post-format-standard related_column'>
	<a href='https://lukasz-socha.pl/php/upgrading-to-php-7-ebook-do-pobrania-za-darmo/' class='relThumWrap noLightbox' title='Upgrading to PHP 7 - ebook do pobrania za darmo'>
	<span class='related_image_wrap' data-avia-related-tooltip="Upgrading to PHP 7 - ebook do pobrania za darmo"><img width="81" height="81" src="https://lukasz-socha.pl/wp-content/uploads/2014/03/post_ico4.png" class="attachment-square size-square wp-post-image" alt="post_ico4" title="post_ico4" srcset="https://lukasz-socha.pl/wp-content/uploads/2014/03/post_ico4.png 81w, https://lukasz-socha.pl/wp-content/uploads/2014/03/post_ico4-80x80.png 80w, https://lukasz-socha.pl/wp-content/uploads/2014/03/post_ico4-36x36.png 36w" sizes="(max-width: 81px) 100vw, 81px" />	<span class='related-format-icon '><span class='related-format-icon-inner' aria-hidden='true' data-av_icon='' data-av_iconfont='entypo-fontello'></span></span>	</span><strong class='av-related-title'>Upgrading to PHP 7 - ebook do pobrania za darmo</strong>	</a></div><div class='av_one_eighth no_margin   relThumb relThumb4 relThumbEven post-format-standard related_column'>
	<a href='https://lukasz-socha.pl/php/mvc-w-praktyce-z-composer-tworzymy-system-artykulow-cz-2/' class='relThumWrap noLightbox' title='MVC w praktyce z composer – tworzymy system artykułów. cz. 2'>
	<span class='related_image_wrap' data-avia-related-tooltip="MVC w praktyce z composer – tworzymy system artykułów. cz. 2"><img width="81" height="81" src="https://lukasz-socha.pl/wp-content/uploads/2014/03/post_ico4.png" class="attachment-square size-square wp-post-image" alt="post_ico4" title="post_ico4" srcset="https://lukasz-socha.pl/wp-content/uploads/2014/03/post_ico4.png 81w, https://lukasz-socha.pl/wp-content/uploads/2014/03/post_ico4-80x80.png 80w, https://lukasz-socha.pl/wp-content/uploads/2014/03/post_ico4-36x36.png 36w" sizes="(max-width: 81px) 100vw, 81px" />	<span class='related-format-icon '><span class='related-format-icon-inner' aria-hidden='true' data-av_icon='' data-av_iconfont='entypo-fontello'></span></span>	</span><strong class='av-related-title'>MVC w praktyce z composer – tworzymy system artykułów. cz. 2</strong>	</a></div><div class='av_one_eighth no_margin   relThumb relThumb5 relThumbOdd post-format-standard related_column'>
	<a href='https://lukasz-socha.pl/css/niestandardowe-pola-typu-checkbox-i-radio/' class='relThumWrap noLightbox' title='Niestandardowe pola typu checkbox i radio'>
	<span class='related_image_wrap' data-avia-related-tooltip="Niestandardowe pola typu checkbox i radio"><img width="82" height="82" src="https://lukasz-socha.pl/wp-content/uploads/2014/03/post_ico2.png" class="attachment-square size-square wp-post-image" alt="post_ico2" title="post_ico2" srcset="https://lukasz-socha.pl/wp-content/uploads/2014/03/post_ico2.png 82w, https://lukasz-socha.pl/wp-content/uploads/2014/03/post_ico2-80x80.png 80w, https://lukasz-socha.pl/wp-content/uploads/2014/03/post_ico2-36x36.png 36w" sizes="(max-width: 82px) 100vw, 82px" />	<span class='related-format-icon '><span class='related-format-icon-inner' aria-hidden='true' data-av_icon='' data-av_iconfont='entypo-fontello'></span></span>	</span><strong class='av-related-title'>Niestandardowe pola typu checkbox i radio</strong>	</a></div><div class='av_one_eighth no_margin   relThumb relThumb6 relThumbEven post-format-standard related_column'>
	<a href='https://lukasz-socha.pl/php/automatyczne-ladowanie-plikow/' class='relThumWrap noLightbox' title='Automatyczne ładowanie plików'>
	<span class='related_image_wrap' data-avia-related-tooltip="Automatyczne ładowanie plików"><img width="81" height="81" src="https://lukasz-socha.pl/wp-content/uploads/2014/03/post_ico4.png" class="attachment-square size-square wp-post-image" alt="post_ico4" title="post_ico4" srcset="https://lukasz-socha.pl/wp-content/uploads/2014/03/post_ico4.png 81w, https://lukasz-socha.pl/wp-content/uploads/2014/03/post_ico4-80x80.png 80w, https://lukasz-socha.pl/wp-content/uploads/2014/03/post_ico4-36x36.png 36w" sizes="(max-width: 81px) 100vw, 81px" />	<span class='related-format-icon '><span class='related-format-icon-inner' aria-hidden='true' data-av_icon='' data-av_iconfont='entypo-fontello'></span></span>	</span><strong class='av-related-title'>Automatyczne ładowanie plików</strong>	</a></div><div class='av_one_eighth no_margin   relThumb relThumb7 relThumbOdd post-format-standard related_column'>
	<a href='https://lukasz-socha.pl/php/wyszukiwanie-za-pomoca-like-i-polskie-znaki-diakrytyczne/' class='relThumWrap noLightbox' title='Wyszukiwanie za pomocą LIKE i polskie znaki diakrytyczne'>
	<span class='related_image_wrap' data-avia-related-tooltip="Wyszukiwanie za pomocą LIKE i polskie znaki diakrytyczne"><img width="81" height="81" src="https://lukasz-socha.pl/wp-content/uploads/2014/03/post_ico4.png" class="attachment-square size-square wp-post-image" alt="post_ico4" title="post_ico4" srcset="https://lukasz-socha.pl/wp-content/uploads/2014/03/post_ico4.png 81w, https://lukasz-socha.pl/wp-content/uploads/2014/03/post_ico4-80x80.png 80w, https://lukasz-socha.pl/wp-content/uploads/2014/03/post_ico4-36x36.png 36w" sizes="(max-width: 81px) 100vw, 81px" />	<span class='related-format-icon '><span class='related-format-icon-inner' aria-hidden='true' data-av_icon='' data-av_iconfont='entypo-fontello'></span></span>	</span><strong class='av-related-title'>Wyszukiwanie za pomocą LIKE i polskie znaki diakrytyczne</strong>	</a></div><div class='av_one_eighth no_margin  omega relThumb relThumb8 relThumbEven post-format-standard related_column'>
	<a href='https://lukasz-socha.pl/css/css-tips-1-obrazki/' class='relThumWrap noLightbox' title='CSS tips #1 - obrazki'>
	<span class='related_image_wrap' data-avia-related-tooltip="CSS tips #1 - obrazki"><img width="82" height="82" src="https://lukasz-socha.pl/wp-content/uploads/2014/03/post_ico2.png" class="attachment-square size-square wp-post-image" alt="post_ico2" title="post_ico2" srcset="https://lukasz-socha.pl/wp-content/uploads/2014/03/post_ico2.png 82w, https://lukasz-socha.pl/wp-content/uploads/2014/03/post_ico2-80x80.png 80w, https://lukasz-socha.pl/wp-content/uploads/2014/03/post_ico2-36x36.png 36w" sizes="(max-width: 82px) 100vw, 82px" />	<span class='related-format-icon '><span class='related-format-icon-inner' aria-hidden='true' data-av_icon='' data-av_iconfont='entypo-fontello'></span></span>	</span><strong class='av-related-title'>CSS tips #1 - obrazki</strong>	</a></div></div></div><div id="post-ratings-1229" class="post-ratings" itemscope itemtype="http://schema.org/Article" data-nonce="14c073284d"><h5>Co sądzisz o wpisie?</h5>
<img id="rating_1229_1" src="https://lukasz-socha.pl/wp-content/plugins/wp-postratings/images/stars/rating_off.gif" alt="Beżnadziejny" title="Beżnadziejny" onmouseover="current_rating(1229, 1, 'Beżnadziejny');" onmouseout="ratings_off(0, 0, 0);" onclick="rate_post();" onkeypress="rate_post();" style="cursor: pointer; border: 0px;" /><img id="rating_1229_2" src="https://lukasz-socha.pl/wp-content/plugins/wp-postratings/images/stars/rating_off.gif" alt="Słaby" title="Słaby" onmouseover="current_rating(1229, 2, 'Słaby');" onmouseout="ratings_off(0, 0, 0);" onclick="rate_post();" onkeypress="rate_post();" style="cursor: pointer; border: 0px;" /><img id="rating_1229_3" src="https://lukasz-socha.pl/wp-content/plugins/wp-postratings/images/stars/rating_off.gif" alt="Średni" title="Średni" onmouseover="current_rating(1229, 3, 'Średni');" onmouseout="ratings_off(0, 0, 0);" onclick="rate_post();" onkeypress="rate_post();" style="cursor: pointer; border: 0px;" /><img id="rating_1229_4" src="https://lukasz-socha.pl/wp-content/plugins/wp-postratings/images/stars/rating_off.gif" alt="Dobry" title="Dobry" onmouseover="current_rating(1229, 4, 'Dobry');" onmouseout="ratings_off(0, 0, 0);" onclick="rate_post();" onkeypress="rate_post();" style="cursor: pointer; border: 0px;" /><img id="rating_1229_5" src="https://lukasz-socha.pl/wp-content/plugins/wp-postratings/images/stars/rating_off.gif" alt="Bardzo dobry" title="Bardzo dobry" onmouseover="current_rating(1229, 5, 'Bardzo dobry');" onmouseout="ratings_off(0, 0, 0);" onclick="rate_post();" onkeypress="rate_post();" style="cursor: pointer; border: 0px;" /> (Brak ocen, bądź pierwszy!)<br /><span class="post-ratings-text" id="ratings_1229_text"></span><meta itemprop="headline" content="Formularze i CSS 3" /><meta itemprop="description" content="CSS 3 dostarcza wiele nowości, które z pewnością ułatwią i przyspieszą pracę nad atrakcyjnymi wizualnie projektami. Mimo, że CSS 3 jest jeszcze w fazie implementacji przez wszystkich najważniejszych p..." /><meta itemprop="datePublished" content="2012-09-01T21:32:38+00:00" /><meta itemprop="url" content="https://lukasz-socha.pl/css/formularze-i-css-3/" /><meta itemprop="image" content="https://lukasz-socha.pl/wp-content/uploads/2014/03/post_ico2-80x80.png" /></div><div id="post-ratings-1229-loading" class="post-ratings-loading">
			<img src="https://lukasz-socha.pl/wp-content/plugins/wp-postratings/images/loading.gif" width="16" height="16" class="post-ratings-image" />Loading...</div>
<div id="disqus_thread">
            <div id="dsq-content">

<ul id="dsq-comments">
                    <li class="comment even thread-even depth-1" id="dsq-comment-391">
        <div id="dsq-comment-header-391" class="dsq-comment-header">
            <cite id="dsq-cite-391">
                <a id="dsq-author-user-391" href="http://krzysztofmyszka.pev.pl" target="_blank" rel="nofollow">Krzysiek</a>
            </cite>
        </div>
        <div id="dsq-comment-body-391" class="dsq-comment-body">
            <div id="dsq-comment-message-391" class="dsq-comment-message"><p>Świetne rozwiązanie.Co prawda formularzy mało co stosuję,ale napewno wszyscy z branży informatycznej powinni być zadowoleni. :-D Pozdro :-D</p>
</div>
        </div>

</li>
    <li class="comment odd alt thread-odd thread-alt depth-1" id="dsq-comment-392">
        <div id="dsq-comment-header-392" class="dsq-comment-header">
            <cite id="dsq-cite-392">
                <a id="dsq-author-user-392" href="http://bratekmarcin.eu" target="_blank" rel="nofollow">Kayne</a>
            </cite>
        </div>
        <div id="dsq-comment-body-392" class="dsq-comment-body">
            <div id="dsq-comment-message-392" class="dsq-comment-message"><p>Kiedy? Może… Teraz? Od tygodni można spokojnie tak tworzyć strony i wyświetlają się poprawnie na wszystkich głównych przeglądarkach, w tym najnowszym IE (sic!).</p>
<p>Czytając ten artykuł nie mogłem sie powstrzymać od uśmieszków. Przejrzyj kody źródłowe wielu nowych serwisów, robionych pod Web 2.0 – te „nowości” są wykorzystywane od dłuższego czasu ;)</p>
<p>Nie wiem jak tam reszta artykułów, to chyba pierwszy jaki znalazłem linkujący do tej strony, ale… Jeśli i w innych tak po łebku traktujesz temat (na cały artykuł wspomniałeś tylko o dwóch elementach, czy się mylę?), to warto popracować nad merytoryczną zawartością wpisów.</p>
<p>Życzę powodzenia w dalszym tworzeniu swoich wypocin, jak i poznawianiu nowości w webdevelopingu ;)</p>
</div>
        </div>

</li>
    <li class="comment byuser comment-author-admin bypostauthor even thread-even depth-1" id="dsq-comment-393">
        <div id="dsq-comment-header-393" class="dsq-comment-header">
            <cite id="dsq-cite-393">
                <a id="dsq-author-user-393" href="http://lukasz-socha.pl/" target="_blank" rel="nofollow">Łukasz</a>
            </cite>
        </div>
        <div id="dsq-comment-body-393" class="dsq-comment-body">
            <div id="dsq-comment-message-393" class="dsq-comment-message"><p>Formularz testowałem w 3 przeglądarkach: Iceweasel, Chrome i Opera. Tylko w Chrome wyświetla się tak jak powinno. W pozostałych jakiś element nie wyświetla się za dobrze, a więc jeszcze trzeba korzystać z tego ostrożnie ;)</p>
<p>Odnośnie merytoryczności.. Nie jest to przegląd nowości w CSS 3, a tylko zwrócenie uwagi na nowe elementy przydatne przy tworzeniu formularzy.</p>
</div>
        </div>

</li>
    <li class="comment odd alt thread-odd thread-alt depth-1" id="dsq-comment-394">
        <div id="dsq-comment-header-394" class="dsq-comment-header">
            <cite id="dsq-cite-394">
                <span id="dsq-author-user-394">Agares</span>
            </cite>
        </div>
        <div id="dsq-comment-body-394" class="dsq-comment-body">
            <div id="dsq-comment-message-394" class="dsq-comment-message"><p><a href="http://www.w3.org/TR/CSS2/selector.html#attribute-selectors" rel="nofollow">http://www.w3.org/TR/CSS2/selector.html#attribute-selectors</a></p>
<p>Te selektory były już w CSS2. Ba, nawet obsługiwane były już od IE7(o innych przeglądarkach nie wspominając) <a href="http://quirksmode.org/css/contents.html" rel="nofollow">http://quirksmode.org/css/contents.html</a></p>
</div>
        </div>

</li>
    <li class="comment byuser comment-author-admin bypostauthor even thread-even depth-1" id="dsq-comment-395">
        <div id="dsq-comment-header-395" class="dsq-comment-header">
            <cite id="dsq-cite-395">
                <a id="dsq-author-user-395" href="http://lukasz-socha.pl/" target="_blank" rel="nofollow">Łukasz</a>
            </cite>
        </div>
        <div id="dsq-comment-body-395" class="dsq-comment-body">
            <div id="dsq-comment-message-395" class="dsq-comment-message"><p>Faktycznie, szczerze mówiąc nie spotkałem się wcześniej z takim sposobem zapisu. Zaraz skoryguję wpis ;)</p>
</div>
        </div>

</li>
    <li class="comment odd alt thread-odd thread-alt depth-1" id="dsq-comment-397">
        <div id="dsq-comment-header-397" class="dsq-comment-header">
            <cite id="dsq-cite-397">
                <span id="dsq-author-user-397">MisKolargol</span>
            </cite>
        </div>
        <div id="dsq-comment-body-397" class="dsq-comment-body">
            <div id="dsq-comment-message-397" class="dsq-comment-message"><p>Nie ma to jak złośliwe komentowanie czyjejś twórczości. Malkontenci znajdą się jednak wszędzie (przecież krytyka może być też konstruktywna).</p>
<p>A jeśli chodzi o selektory, to można o nich poczytać w specyfikacji, która została już ukończona (na <a href="http://www.bt4.pl/webmaster/css/css-3-selektory/" rel="nofollow">http://www.bt4.pl/webmaster/css/css-3-selektory/</a> jest też jej tłumaczenie)</p>
</div>
        </div>

</li>
    <li class="comment byuser comment-author-admin bypostauthor even thread-even depth-1" id="dsq-comment-398">
        <div id="dsq-comment-header-398" class="dsq-comment-header">
            <cite id="dsq-cite-398">
                <a id="dsq-author-user-398" href="http://lukasz-socha.pl/" target="_blank" rel="nofollow">Łukasz</a>
            </cite>
        </div>
        <div id="dsq-comment-body-398" class="dsq-comment-body">
            <div id="dsq-comment-message-398" class="dsq-comment-message"><p>Prowadząc bloga muszę być na nie odporny ;) Ale z selektorami fatycznie gafę strzeliłem – kazdemu przeoczenie może się zdarzyć :)</p>
</div>
        </div>

</li>
    <li class="comment odd alt thread-odd thread-alt depth-1" id="dsq-comment-7167">
        <div id="dsq-comment-header-7167" class="dsq-comment-header">
            <cite id="dsq-cite-7167">
                <span id="dsq-author-user-7167">Krzysiek</span>
            </cite>
        </div>
        <div id="dsq-comment-body-7167" class="dsq-comment-body">
            <div id="dsq-comment-message-7167" class="dsq-comment-message"><p>a gdzie w kodzie umieścić swój mail na który ten formularz ma wysyłać wiadomość</p>
</div>
        </div>

<ul class="children">
    <li class="comment even depth-2" id="dsq-comment-7168">
        <div id="dsq-comment-header-7168" class="dsq-comment-header">
            <cite id="dsq-cite-7168">
                <a id="dsq-author-user-7168" href="http://lukasz-socha.pl/" target="_blank" rel="nofollow">Łukasz Socha</a>
            </cite>
        </div>
        <div id="dsq-comment-body-7168" class="dsq-comment-body">
            <div id="dsq-comment-message-7168" class="dsq-comment-message"><p>Jeżeli chcesz wysyłać maile za pomocą PHP to np,:<a href="http://webmade.org/porady/wysylanie-wiadomosci-e-mail-php.php" rel="nofollow">http://webmade.org/porady/wysylanie-wiadomosci-e-mail-php.php</a></p>
</div>
        </div>

</li>
</ul>
</li>
            </ul>

</div>

// sync comments in the background so we don't block the page
        var script = document.createElement('script');
        script.async = true;
        script.src = '?cf_action=sync_comments&post_id=1229';

var firstScript = document.getElementsByTagName('script')[0];
        firstScript.parentNode.insertBefore(script, firstScript);
    });
    
    if (disqus_config_custom) {
        disqus_config_custom.call(this);
    }
};

(function() {
    var dsq = document.createElement('script'); dsq.type = 'text/javascript';
    dsq.async = true;
    dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>

</main>

<aside class='sidebar sidebar_right smartphones_sidebar_active alpha units'  role="complementary" itemscope="itemscope" itemtype="https://schema.org/WPSideBar" ><div class='inner_sidebar extralight-border'><section id="freshmail_newsletter-2" class="widget clearfix widget_freshmail_newsletter"><h3 class="widgettitle">Pozostańmy w kontakcie!</h3><form class='freshmail-newsletter-form'>
    <p>Jeśli nie zaglądasz regularnie na blog, a nie chcesz nic przeoczyć, <b>możesz zapisać się na newsletter</b> z powiadomieniami o nowych wpisach.</p>
    <fieldset style='border: none'>
    	<input type='hidden' name='action' value='freshmail_newsletter_subscribe_action' />
    	<label for='email'>Adres email</label><input type='text' name='email' />
    
                    
                <label for='imie'>Imię</label><input type='text' name='imie' />
                        
    	<input type='submit' value='Dołącz' />
    </fieldset>
	<p style="font-size:12px;line-height:14px;">Podane przez Ciebie w formularzu zapisu do newslettera dane zostaną wykorzystane w celu w celu przesyłania Użytkownikowi newslettera. Administratorem danych osobowych będzie Racy Mind Łukasz Socha, ul. Puławska 15/7, 24-300 Opole Lubelskie, NIP: 717-181-21-16. Więcej w <a href="http://lukasz-socha.pl/polityka-prywatnosci/" targe="_blank">polityce prywatności</a>.</p>
</form>
<script>
jQuery('document').ready(function($){
	function showNewsletterMessage(form, msg, hide) {
		var msgDiv = jQuery('<div>').text(msg).hide();

form.after(msgDiv);

msgDiv.slideDown('fast');

if (hide) {
			window.setTimeout(function() {
				msgDiv.slideUp('fast', function() {
					jQuery(this).remove();
				});
			}, 7000);
		}
	}

jQuery('.freshmail-newsletter-form').submit(function() {
		var form = jQuery(this);

jQuery.ajax({
			url:"https://lukasz-socha.pl/wp-admin/admin-ajax.php",
			data: form.serialize(),
			type: 'post',
			dataType: 'json',
			beforeSend: function() {
				form.find('input').attr('disabled', 'disabled');
			},
			success: function(data) {
				if (data.status && data.status == 'success') {
					showNewsletterMessage(form, data.message, false);
					form.slideUp('fast');
				} else if (data.status && data.status == 'error') {
					showNewsletterMessage(form, data.message, true);
				} else {
					showNewsletterMessage(form, 'Wystąpił błąd. Serwer zwrócił nieznaną odpowiedź.', true);
				}
			},
			complete: function() {
				form.find('input').removeAttr('disabled');
			}
		});
		return false;
	});
});
</script>
<span class="seperator extralight-border"></span></section><section id="text-10" class="widget clearfix widget_text"><h3 class="widgettitle">Mój najnowszy projekt</h3>			<div class="textwidget"><a href="https://mindercrm.com" target="_blabk"><img src="http://lukasz-socha.pl/wp-content/uploads/2017/09/mindercrm.jpg" alt="minderCRM"></a></div>
		<span class="seperator extralight-border"></span></section><section id="category-excluder" class="widget clearfix category_excluder_widget"><h3 class="widgettitle">Lista kategorii</h3><ul id="category_excluder_widget">	<li class="cat-item cat-item-10"><a href="https://lukasz-socha.pl/blog/algorytmy-i-struktury-danych/" >Algorytmy i struktury danych</a>
</li>
	<li class="cat-item cat-item-34"><a href="https://lukasz-socha.pl/blog/css/" >CSS</a>
</li>
	<li class="cat-item cat-item-25"><a href="https://lukasz-socha.pl/blog/html/" >HTML</a>
</li>
	<li class="cat-item cat-item-1"><a href="https://lukasz-socha.pl/blog/inne/" >Inne</a>
</li>
	<li class="cat-item cat-item-100"><a href="https://lukasz-socha.pl/blog/java-script-jquery/" >Java Script / jQuery</a>
</li>
	<li class="cat-item cat-item-14"><a href="https://lukasz-socha.pl/blog/php/" title="Znajdziesz tutaj wpisy na temat programowania w PHP.">PHP</a>
<ul class='children'>
	<li class="cat-item cat-item-29"><a href="https://lukasz-socha.pl/blog/php/projektowanie/" >projektowanie</a>
</li>
	<li class="cat-item cat-item-42"><a href="https://lukasz-socha.pl/blog/php/wzorce-projektowe/" title="Znajdziesz tutaj opisy oraz praktyczne przykłady wykorzystania różnych wzorców projektowych w programowaniu w PHP.">wzorce projektowe</a>
</li>
</ul>
</li>
	<li class="cat-item cat-item-99"><a href="https://lukasz-socha.pl/blog/wywiady/" title="Znajdziesz tutaj wywiady z ciekawymi ludźmi. Tematyka rozmów głównie związana z IT oraz efektywnym wykorzystaniem internetu.">Wywiady</a>
</li>
</ul><span class="seperator extralight-border"></span></section><section id="text-5" class="widget clearfix widget_text"><h3 class="widgettitle">Jakich wpisów szukasz?</h3>			<div class="textwidget"><ul>
<li><a href="http://lukasz-socha.pl/tag/dla-poczatkujacych/">Dla początkujących</a></li>
<li><a href="http://lukasz-socha.pl/tag/dla-srednio-zaawansowanych/">Dla średnio zaawansowanych</a></li>
</ul></div>
		<span class="seperator extralight-border"></span></section></div></aside>

</div>

</div>

<div class='flex_column av_one_third  first el_before_av_one_third'><section id="text-4" class="widget clearfix widget_text"><h3 class="widgettitle">Znajdziesz mnie na</h3>			<div class="textwidget"><a href="https://www.facebook.com/pages/Lukasz-Sochapl-blog-web-developera/206360412726280" rel="nofollow"><img alt="" src="http://lukasz-socha.pl/wp-content/uploads/2014/03/fb2.png" /></a> <a href="https://twitter.com/lukaszsochapl" rel="nofollow"><img alt="" src="http://lukasz-socha.pl/wp-content/uploads/2014/03/tw2.png" /></a> <a href="http://www.goldenline.pl/lukasz-socha9/" rel="nofollow"><img alt="" src="http://lukasz-socha.pl/wp-content/uploads/2014/03/gl2.png" /></a> <a href="https://www.linkedin.com/in/łukasz-socha-30083841" rel="nofollow"><img alt="" src="http://lukasz-socha.pl/wp-content/uploads/2014/03/lin2.png" /></a><br>
<a href="http://www.bloglovin.com/blog/14147383/?claim=ymbyaxr2t4a">Follow my blog with Bloglovin</a></div>
		<span class="seperator extralight-border"></span></section></div><div class='flex_column av_one_third  el_after_av_one_third  el_before_av_one_third '><section id="nav_menu-3" class="widget clearfix widget_nav_menu"><h3 class="widgettitle">Z tego jestem dumny</h3><div class="menu-polecam-container"><ul id="menu-polecam" class="menu"><li id="menu-item-1921" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1921"><a href="http://racymind.pl">Racy Mind – projektowanie i tworzenie stron www</a></li>
<li id="menu-item-2537" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2537"><a href="http://wolny-strzelec.com">Wolny Strzelec</a></li>
<li id="menu-item-1633" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1633"><a href="http://kalkulator.racymind.pl">Kalkulator dla przedsiębiorcy</a></li>
<li id="menu-item-2268" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2268"><a href="http://seo.racymind.pl/">E-book „O optymalizacji stron internetowych”</a></li>
<li id="menu-item-1920" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1920"><a href="http://lukasz-socha.pl/php/wzorce-projektowe-spis-tresci/">Wzorce projektowe</a></li>
<li id="menu-item-2476" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2476"><a href="https://lukasz-socha.pl/wspolpraca/">Współpraca z blogiem</a></li>
</ul></div><span class="seperator extralight-border"></span></section></div><div class='flex_column av_one_third  el_after_av_one_third  el_before_av_one_third '><style scoped type="text/css">.utcw-2jf46b8 {word-wrap:break-word}.utcw-2jf46b8 span,.utcw-2jf46b8 a{border-width:0px}.utcw-2jf46b8 span:hover,.utcw-2jf46b8 a:hover{border-width:0px}</style><section id="utcw-2" class="widget clearfix widget_utcw widget_tag_cloud"><h3 class="widgettitle">Na skróty</h3><div class="utcw-2jf46b8 tagcloud"><a class="tag-link-41 utcw-tag utcw-tag-mvc" href="https://lukasz-socha.pl/tag/mvc/" style="font-size:10.9302325581px" title="7 topics">MVC</a> <a class="tag-link-103 utcw-tag utcw-tag-dla-srednio-zaawansowanych" href="https://lukasz-socha.pl/tag/dla-srednio-zaawansowanych/" style="font-size:30px" title="48 topics">dla średnio zaawansowanych</a> <a class="tag-link-159 utcw-tag utcw-tag-metody-atakow-hakerskich" href="https://lukasz-socha.pl/tag/metody-atakow-hakerskich/" style="font-size:10.9302325581px" title="7 topics">metody ataków hakerskich</a> <a class="tag-link-43 utcw-tag utcw-tag-model-view-controller" href="https://lukasz-socha.pl/tag/model-view-controller/" style="font-size:10.4651162791px" title="6 topics">Model-View-Controller</a> <a class="tag-link-32 utcw-tag utcw-tag-wywiad" href="https://lukasz-socha.pl/tag/wywiad/" style="font-size:10px" title="5 topics">wywiad</a> <a class="tag-link-109 utcw-tag utcw-tag-dla-poczatkujacych" href="https://lukasz-socha.pl/tag/dla-poczatkujacych/" style="font-size:22.5581395349px" title="32 topics">dla początkujących</a> <a class="tag-link-102 utcw-tag utcw-tag-google-maps" href="https://lukasz-socha.pl/tag/google-maps/" style="font-size:10.4651162791px" title="6 topics">google maps</a> <a class="tag-link-179 utcw-tag utcw-tag-wzorce-projektowe" href="https://lukasz-socha.pl/tag/wzorce-projektowe/" style="font-size:16.976744186px" title="20 topics">wzorce projektowe</a> <a class="tag-link-160 utcw-tag utcw-tag-bezpieczenstwo" href="https://lukasz-socha.pl/tag/bezpieczenstwo/" style="font-size:11.3953488372px" title="8 topics">bezpieczeństwo</a> <a class="tag-link-144 utcw-tag utcw-tag-seo" href="https://lukasz-socha.pl/tag/seo/" style="font-size:10.9302325581px" title="7 topics">seo</a></div><span class="seperator extralight-border"></span></section></div>

</div>

</div>

<a rel="nofollow" id="racymind" href="http://racymind.pl"></a>
            <div id="fb-slide">
                <div class="fb-like" data-href="https://www.facebook.com/pages/Lukasz-Sochapl-blog-web-developera/206360412726280" data-layout="button_count" data-action="like" data-show-faces="true" data-share="false"></div>
            </div>
            <div id="tw-slide">
                <a rel="nofollow" href="https://twitter.com/lukaszsochapl" class="twitter-follow-button" data-show-count="false" data-lang="pl" data-show-screen-name="false">Obserwuj @lukaszsochapl</a>
                <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
            </div>

</footer>

</div>
		
		<a class='avia-post-nav avia-post-prev with-image' href='https://lukasz-socha.pl/inne/blogowanie-nowy-zawod-czy-ciagle-tylko-hobby/' >    <span class='label iconfont' aria-hidden='true' data-av_icon='' data-av_iconfont='entypo-fontello'></span>    <span class='entry-info-wrap'>        <span class='entry-info'>            <span class='entry-title'>Blogowanie – nowy zawód, czy ciągle tylko hobby?</span>            <span class='entry-image'><img width="80" height="80" src="https://lukasz-socha.pl/wp-content/uploads/2014/03/post_ico6-80x80.png" class="attachment-thumbnail size-thumbnail wp-post-image" alt="post_ico6" srcset="https://lukasz-socha.pl/wp-content/uploads/2014/03/post_ico6-80x80.png 80w, https://lukasz-socha.pl/wp-content/uploads/2014/03/post_ico6-36x36.png 36w, https://lukasz-socha.pl/wp-content/uploads/2014/03/post_ico6.png 81w" sizes="(max-width: 80px) 100vw, 80px" /></span>        </span>    </span></a><a class='avia-post-nav avia-post-next with-image' href='https://lukasz-socha.pl/php/wzorce-projektowe-cz-11-observer/' >    <span class='label iconfont' aria-hidden='true' data-av_icon='' data-av_iconfont='entypo-fontello'></span>    <span class='entry-info-wrap'>        <span class='entry-info'>            <span class='entry-image'><img width="80" height="80" src="https://lukasz-socha.pl/wp-content/uploads/2014/03/post_ico4-80x80.png" class="attachment-thumbnail size-thumbnail wp-post-image" alt="post_ico4" srcset="https://lukasz-socha.pl/wp-content/uploads/2014/03/post_ico4-80x80.png 80w, https://lukasz-socha.pl/wp-content/uploads/2014/03/post_ico4-36x36.png 36w, https://lukasz-socha.pl/wp-content/uploads/2014/03/post_ico4.png 81w" sizes="(max-width: 80px) 100vw, 80px" /></span>            <span class='entry-title'>Wzorce projektowe, cz. 11 Observer</span>        </span>    </span></a></div>

<div id="cookie-law-info-bar"><span>Strona korzysta z plików Cookies. Możesz określić warunki przechowywania lub dostępu do Cookies w Twojej przeglądarce. Więcej w <a href="http://lukasz-socha.pl/polityka-prywatnosci/" id="CONSTANT_OPEN_URL" target="_blank"  class="cli-plugin-main-link"  >Polityka prywatności</a>. <a href="#" id="cookie_action_close_header"  class="medium cli-plugin-button cli-plugin-main-button" >Akceptuję</a> </span></div><div id="cookie-law-info-again"><span id="cookie_hdr_showagain">Polityka prywatności i cookies</span></div>		
		<script type="text/javascript">
			//<![CDATA[
			jQuery(document).ready(function() {
				cli_show_cookiebar({
					settings: '{"animate_speed_hide":"500","animate_speed_show":"500","background":"#fff","border":"#444","border_on":true,"button_1_button_colour":"#c93129","button_1_button_hover":"#a12721","button_1_link_colour":"#fff","button_1_as_button":true,"button_2_button_colour":"#333","button_2_button_hover":"#292929","button_2_link_colour":"#444","button_2_as_button":false,"font_family":"inherit","header_fix":false,"notify_animate_hide":true,"notify_animate_show":false,"notify_div_id":"#cookie-law-info-bar","notify_position_horizontal":"left","notify_position_vertical":"bottom","scroll_close":false,"scroll_close_reload":false,"showagain_tab":true,"showagain_background":"#fff","showagain_border":"#000","showagain_div_id":"#cookie-law-info-again","showagain_x_position":"100px","text":"#000","show_once_yn":false,"show_once":"10000"}'
				});
			});
			//]]>
		</script>
		
		        <script type="text/javascript">
        // <![CDATA[
        var disqus_shortname = 'lsocha';
        (function () {
            var nodes = document.getElementsByTagName('span');
            for (var i = 0, url; i < nodes.length; i++) {
                if (nodes[i].className.indexOf('dsq-postid') != -1) {
                    nodes[i].parentNode.setAttribute('data-disqus-identifier', nodes[i].getAttribute('data-dsqidentifier'));
                    url = nodes[i].parentNode.href.split('#', 1);
                    if (url.length == 1) { url = url[0]; }
                    else { url = url[1]; }
                    nodes[i].parentNode.href = url + '#disqus_thread';
                }
            }
            var s = document.createElement('script');
            s.async = true;
            s.type = 'text/javascript';
            s.src = '//' + disqus_shortname + '.disqus.com/count.js';
            (document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
        }());
        // ]]>
        </script>
        
 <script type='text/javascript'>
 /* <![CDATA[ */  
var avia_framework_globals = avia_framework_globals || {};
    avia_framework_globals.frameworkUrl = 'https://lukasz-socha.pl/wp-content/themes/enfold/framework/';
    avia_framework_globals.installedAt = 'https://lukasz-socha.pl/wp-content/themes/enfold/';
    avia_framework_globals.ajaxurl = 'https://lukasz-socha.pl/wp-admin/admin-ajax.php';
/* ]]> */ 
</script>
 
       <script type="text/javascript">

<div id="fb-root"></div>
        <img style="display: none;" src="https://racymind.mindercrm.com/api/cookie"/>
        <div id="contact-form-widget"></div>
        <script>
                var config={};
                config.domain= 'lukasz-socha.pl';
                config.type='contact_form';
                config.pageUrl='https://lukasz-socha.pl:443/css/formularze-i-css-3/';
				config.userAgent= 'CCBot/2.0 (https://commoncrawl.org/faq/)';
				config.referer= '';
                getCampaign(jQuery("#contact-form-widget"), config);
        </script>
</body>
</html>