Știai că... Poți adăuga hover pentru parent-ul unui element fără a cunoaște parent?

Written on September 19th, 2011 by

Long story short:

.delete { display:none; }
:hover > .delete { display:block; }

Testat pe IE7+, FF, Chrome & co.

  • Posted in:
Nu sunt comentarii!

Știai că... Poți folosi thead pentru a face un calendar?

Written on August 13th, 2011 by

În timp ce modificam un plugin de WordPress mi-am dat seama că semantica este o problemă pentru foarte mulți web developeri. Astfel, apar diverse cazuri în care ai un markup de genul:

<table>
	<tr>
		<td class="calendar-heading" colspan="7">
			<table>
				<tr>
					<td class="calendar-prev"><a href="#">« Prev</a></td>
					<td class="calendar-month">August 2011</td>
					<td class="calendar-next"><a href="#">Next »</a></td>
				</tr>
			</table>
		</td>
	</tr>
	<tr>
		<td class="normal-day-heading">Monday</td>
		<td class="normal-day-heading">Tuesday</td>
		<td class="normal-day-heading">Wednesday</td>
		<td class="normal-day-heading">Thursday</td>
		<td class="normal-day-heading">Friday</td>
		<td class="weekend-heading">Saturday</td>
		<td class="weekend-heading">Sunday</td>
	</tr>
	<tr>
		<td class="day-with-date no-events">
			<span class="dayOfMonth ">1</span>
			<span class="event"></span>
		</td>

		<td class="day-with-date no-events">
			<span class="dayOfMonth ">2</span>
			<span class="event"></span>
		</td>

		<td class="day-with-date no-events">
			<span class="dayOfMonth ">3</span>
			<span class="event"></span>
		</td>

		<td class="day-with-date no-events">
			<span class="dayOfMonth ">4</span>
			<span class="event"></span>
		</td>

		<td class="day-with-date no-events">
			<span class="dayOfMonth ">5</span>
			<span class="event"></span>
		</td>

		<td class="day-with-date no-events">
			<span class="dayOfMonth  weekend">6</span>
			<span class="event"></span>
		</td>

		<td class="day-with-date no-events">
			<span class="dayOfMonth  weekend">7</span>
			<span class="event"></span>
		</td>
	</tr>
</table>
view raw table_markup1.html This Gist brought to you by GitHub.

Nimic greșit, doar că s-ar putea face un cod mai curat și mai simplu folosind câteva taguri html uitate sau ignorate. Un thead și tbody pot face minuni în ceea ce privește separarea secțiunilor:

<table>
	<thead>
		<tr>
			<td colspan="7">
				<table>
					<tr>
						<td class="calendar-prev"><a href="#">« Prev</a></td>
						<th>August 2011</td>
						<td class="calendar-next"><a href="#">Next »</a></td>
					</tr>
				</table>
			</td>
		</tr>
		<tr>
			<th>Monday</th>
			<th>Tuesday</th>
			<th>Wednesday</th>
			<th>Thursday</th>
			<th>Friday</th>
			<th class="weekend-heading">Saturday</th>
			<th class="weekend-heading">Sunday</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td class="no-events">
				<span class="dayOfMonth ">1</span>
				<span class="event"></span>
			</td>

			<td class="no-events">
				<span class="dayOfMonth ">2</span>
				<span class="event"></span>
			</td>

			<td class="no-events">
				<span class="dayOfMonth ">3</span>
				<span class="event"></span>
			</td>

			<td class="no-events">
				<span class="dayOfMonth ">4</span>
				<span class="event"></span>
			</td>

			<td class="no-events">
				<span class="dayOfMonth ">5</span>
				<span class="event"></span>
			</td>

			<td class="no-events">
				<span class="dayOfMonth  weekend">6</span>
				<span class="event"></span>
			</td>

			<td class="no-events">
				<span class="dayOfMonth  weekend">7</span>
				<span class="event"></span>
			</td>
		</tr>
	</tbody>
</table>
view raw table_markup2.html This Gist brought to you by GitHub.

Rezultatul, din punct de vedere vizual, este fix același. În schimb, toată povestea devine mult mai logică. Nu?

  • Posted in:
Nu sunt comentarii!

Știai că... Unele tag-uri HTML nu trebuiesc închise?

Written on May 12th, 2011 by

În afară de br, hr, img și input mai sunt alte două tag-uri ce nu au nevoie de pereche. Dacă primele au acel slash la sfârșit (fiind auto-close), cele de care îți voi povesti acum sunt pur și simplu… deschise și lăsate așa.

Liste și paragrafe

În HTML tag-urile necesare sunt ceva mai puține decât în cazul XHTML. Astfel, poți avea o listă de genul:

<ul>
	<li>Element 1
	<li>Element 2
	...
	<li>Element n
</ul>

Respectiv

<p>Paragraf ...
<p>Alt paragraf ...

De asemenea, elementele ce au acel slash… nu au nevoie de acel slash! :D 

<input type="text" name="test">
<br>
<img src="imagine.jpg" alt="">

Atenție! Treaba asta este valabilă pentru HTML, nu pentru XHTML, acesta din urmă fiind ceva mai pretențios.

  • Posted in:
4 Comentarii

Știai că... Nu poți include un fișier numit widgets.php?

Written on May 11th, 2011 by

Dacă incluzi un fișier numit widgets.php în functions.php o să ai supriza să… nu meargă.

În frontend e OK. În backend… Nu prea se execută nimic.

  • Posted in:
6 Comentarii

Știai că... Nu poți folosi nume camelCase pentru widgets?

Written on May 11th, 2011 by

După vreo 15 minute de chin și groază în care mă minunam de ce widget-urile apar în admin dar nu li se salvează poziția, am zis să redenumesc sidebar-ul în side-blog. 

function ntz_widgets_init() {
	register_sidebar( array(
		'name' => __( 'Blog sidebar', 'ntz' ),
		'id' => 'blog-sidebar',
		'description' => __( 'Blog sidebar (visible only on blog section)', 'ntz' ),
		'before_widget' => '<div class="sideWidget widget-container %1$s %2$s">',
		'after_widget' => '</div>',
		'before_title' => '<h3 class="widget-title">',
		'after_title' => '</h3>',
	) );
}
add_action( 'widgets_init', 'ntz_widgets_init' );


if ( is_active_sidebar( 'blog-sidebar' ) ) {
		dynamic_sidebar( 'blog-sidebar' );
} else {
	echo 'please define a sidebar';
}
  • Posted in:
Nu sunt comentarii!