The post Pitchmaker appeared first on CSS Park.

Here is a code snippet that will show the updated modification time for a post/page, as well as the original publish time.

<?php if (get_the_modified_time() != get_the_time()) : ?>
 
		<p>Posted: <?php the_time('F j, Y'); ?> at <?php the_time('g:i a'); ?>, Last Updated: <?php the_modified_time('F j, Y'); ?> at <?php the_modified_time('g:i a'); ?></p>
 
	<?php else: ?>
 
		<p>Posted: <?php the_time('F j, Y'); ?> at <?php the_time('g:i a'); ?></p>
 
<?php endif; ?>

This snippet is really simple. If the modified time is not equal to the original post time, then show the original publish time followed by the modified time. If the post or page hasn’t been updated since it was orginally published, then the visitors will just see the original publish time.

The post Show the Latest Update Time and Date for a WordPress Page or Post appeared first on CSS Park.

.zoom {
  zoom: 150%;
}

The “supported: values are:

• percentage – Scale by this percentage
• number – Convert to percentage and scale – 1 == 100%; 1.5 == 150%;
• normal – zoom: 1;

If your browser supports it, you’ll see these images as different sizes:

<img src="http://placekitten.com/100/100">
<img src="http://placekitten.com/100/100">
<img src="http://placekitten.com/100/100">
<img src="http://placekitten.com/100/100">

img:nth-child(2) {
  zoom: 150%;
}
img:nth-child(3) {
  zoom: 1.8;
}
img:nth-child(4) {
  zoom: 0.2;
}

Zoom is an old IE thing. It isn’t something you should use on live sites. If you want to scale content, use CSS Transforms. You can also use filters if you need oldIE support.

Back in the days of IE6, zoom was used primarily as a hack. Many of the rendering bugs in both IE6 and IE7 could be fixed using zoom. As an example, display: inline-block didn’t work very well in IE6/7. Setting zoom: 1 fixed the problem. The bug had to do with how IE rendered its layout. Setting zoom: 1 turned on an internal property called hasLayout, which fixed the problem.

Browser Support

Safari also supports zoom since version 4. However, it added a new value: reset. That tells the browser not to zoom your element on zoom. So your cmd/ctrl+? It doesn’t work on elements withzoom: reset applied.

The post zoom appeared first on CSS Park.

The z-index property in CSS controls the vertical stacking order of elements that overlap. As in, which one appears as if it is physically closer to you. z-index only effects elements that have a position value other than static (the default).

Elements can overlap for a variety of reasons, for instance relative positioning has nudged it over something else. Negative margin has pulled the element over another. Absolutely positioned elements overlap each other. All sorts of reasons.

Without any z-index value, elements stack in the order that they appear in the DOM (the lowest one down at the same hierarchy level appears on top). Elements with non-static positioning will always appear on top of elements with default static positioning.

Also note that nesting plays a big role. If an element B sits on top of element A, a child element of element A can never be higher than element B.

Note that older version of IE get this context stuff a bit screwed up.

Browser Support

The post z-index appeared first on CSS Park.

p {
    word-spacing: 2em;
}

word-spacing can receive three different values:

1. the “normal” keyword, which resets the default spacing
2. length values using any CSS units (most commonly px, em, rem)
3. the “inherit” keyword, which applies the word-spacing of the parent element

Best practice at this time would be to use em. Font size can be adjusted, so using pixels for this could cause problems at the spacing between words wouldn’t scale as their size did. rem is great usually, but browser support is lower and in this use case it’s probably best the spacing is relevant directly to the words it is being applied to, not the root.

It is important to note that “word” in this context actually refers a singular piece of inline content—which means that word-spacing affects inline-block elements as well as inline elements. In this example, several such elements are spaced by setting the word-spacing of their parent container:

<div class="wrap">
  <div class="module"></div>
  <div class="module"></div>
  <div class="module"></div>
  <div class="module"></div>
</div>

.wrap {
  word-spacing: 1em;
  padding: 1em 0 0;
}
.module {
  background: lightsteelblue;
  height: 5em;
  width: 5em;
  display: inline-block;
  /* reset word-spacing so that text inside this box is spaced normally */
  word-spacing: normal;
}

Points of Interest

• The word-spacing property is animatable with CSS Transitions.
• While use of the “percentage” value to determine spacing is permitted as per the spec, it can yield unpredictable results — often simply no effect at all.
• Setting white-space to zero is one of the ways to fight against the space between inline block elements.

Browser Support

A note on Android browser support: The vast majority of Android devices support word-spacing—however, some devices using non-Apple builds of Webkit or the Netfront browser do not. The specifics are detailed in the QuirksMode link above.

The post word-spacing appeared first on CSS Park.

Normally, line breaks in text can only occur in certain spaces, like when there is literally a space or a hyphen. When you set word-break to break-all, line breaks can occur between any character. Resulting in, for example:

Perform
ance

(if that word wouldn’t quite fit into its parent container width)

It’s often used in places with user generated content so that long strings don’t risk breaking layout. One very common example is a long copy and pasted URL. If that URL has no hyphens, it can extend beyond the parent box and look bad or worse, cause layout problems.

It is also often used in conjunction with the hyphens property so that when breaks occur a hypen is inserted, as per the standard in books.

The full usage, with needed vendor prefixes, is:

-ms-word-break: break-all;
     word-break: break-all;

     // Non standard for webkit
     word-break: break-word;

-webkit-hyphens: auto;
   -moz-hyphens: auto;
        hyphens: auto;

Using these properties on the universal selector can be useful if you have a site with a lot of user generated content. Although fair warning, it can look weird on titles and pre formatted text (<pre>).

The post word-break appeared first on CSS Park.

.wrap {
  width: 80%;
}

In the example above, elements that have a class name of .wrap will be 80% as wide as their parent element. The accepted values are any of the length values, in addition to some keywords we’ll cover later.

Width can be overridden by the closely correleated properties min-width and max-width.

.wrapperA {
  width: 100%;
  max-width: 320px; /* Will be AT MOST 320px wide */
}
.wrapperB {
  width: 100%;
  min-width: 20em; /* Will be AT LEAST 20em wide */
}

<!-- Entire Viewport -->
<h1>Entire Viewport</h1>
<div class="viewport">
	<p>Width <code>%</code></p>
	<div class="box-width percentage">100%</div>
	<p>Width  <code>px</code></p>
	<div class="box-width pixel">200px</div>
	<p>Width  <code>em</code> <small>(based on 16px computed font-size)</small></p>
	<div class="box-width em">20em</div>
	<p>Width  <code>rem</code> <small>(based on 16px computed font-size of root element)</small></p>
	<div class="box-width em">20rem</div>
</div>

<!-- Container 480px -->
<h1>Container 480px</h1>
<div class="container">
	<p>Width <code>%</code></p>
	<div class="box-width percentage-half">50%</div>
	<div class="box-width percentage-full">100%</div>
	<p>Width  <code>px</code></p>
	<div class="box-width pixel">200px</div>
	<p>Width  <code>em</code> <small>(based on 16px computed font-size)</small></p>
	<div class="box-width em">20em</div>
	<p>Width  <code>rem</code> <small>(based on 16px computed font-size of root element)</small></p>
	<div class="box-width em">20rem</div>
</div>

<!-- Absolute Position -->
<h1>Absolute Position</h1>
<div class="absolute-position">
	<div class="box-width no-width">Based on content if width is not defined</div>
  <div class="box-width rem"></div>
  <div class="box-width em"></div>
</div>

<!-- Table Rows -->
<h1>Table Rows :(</h1>
<table>
	<tr class="box-width row-percent">
		<td>%</td>
	</tr>
	<tr class="box-width row-em">
		<td>em</td>
	</tr>
</table>

// ========================================
// Globals
// ========================================

html {
	background: #292a2b;
	color: #FFF;
}

.box-width {
	height: 50px;
	background: #e78629;
}


// ========================================
// Demo
// ========================================

.viewport {
	outline: 1px solid #ed862a;
	.box-width.percentage {
		width: 100%; // %
	}
  .box-width.pixel {
		width: 200px; // px
	}
	.box-width.em {
		width: 20em; // em
	}
	.box-width.em {
		width: 20rem; // rem
	}
}


// ========================================
// Container 480px
// ========================================

.container {
	outline: 1px solid #ed862a;
	width: 500px;
	.box-width.percentage-half {
		width: 50%; // half %
	}
	.box-width.percentage-full {
		width: 100%; // full %
	}
	.box-width.pixel {
		width: 200px; // px
	}
	.box-width.em {
		width: 20em; // em
	}
	.box-width.em {
		width: 20rem; // rem
	}
}


// ========================================
// Table Rows and Row Groups
// ========================================

.absolute-position {
  position: relative;
  .box-width.no-width { // width is calculated based on content
    outline: 1px solid black;
    position: absolute;
    top: 0;
    right: 0;
  }
}


// ========================================
// Table Rows and Row Groups
// ========================================

.box-width.row-percent {
	width: 50%;
}

.box-width.row-em {
	width: 20em;
}

Digging Deeper

When using percentage (%) for width, authors must be aware that the percentage is based on the element’s parent, or in other words, the width of the containing block. If your parent is set at 480px – as demonstrated by our demo – then the percentage is based on that value. So in our case 50% of 480px leaves us with 240px as a computed pixel value.

Note that width applies to all elements except non-replaced or inline elements, table rows and row groups (i.e. thead, tfoot and tbody).

For absolutely positioned elements whose containing block is based on a block container element, the percentage is calculated with respect to the width of the padding box of that element.

Width is usable today as an animatable property.

<div class="animating-width">hover to animate width using CSS Transitions</div>

html {
  background: #292a2b;
	color: #FFF;
}

// =========================================
// Width Animation Demo
// =========================================

.animating-width {
  background: #e78629;
  color: white;
  height: 100px;
  width: 50%;
  @include transition(.3s width ease-in-out); // the transition effect for hover
  &:hover {
    cursor: pointer;
    width: 100%; // animating to full width on hover
  }
}

Keyword Values

With some special keyword values, it is possible to define width (and/or height) according to the content of the element.

min-content

The min-content value is the smallest measure that would fit around its content if all soft wrap opportunities within the box were taken.

The best example for this kind of value is a properly written figure element:

<figure>
  <img src="images/kitten.jpg" alt="" />
  <figcaption>What a lovely kitten we got there in this image which is encapsulted in a figure element. How dear, look how long this caption is!</figcaption>
</figure>

Once we have applied some basic styles to this markup, we get:

<figure>
  <img src="http://placekitten.com/400/200" alt="" />
  <figcaption>What a lovely kitten we got there in this image which is encapsulted in a figure element. How dear, look how long this caption is!</figcaption>
</figure>

figure {
  margin: 1em auto;
  background: #EFEFEF;
  border: 1px solid rgba(0,0,0,.1);
  padding: 1em;
}

img {
  display: block;
}

figcaption {
  padding: 1em 0;
}

If we wanted that figure element to essentially be the size of that image, so the text wraps at the edges of the image. We could float it left or right, because float will exhibit that same kind of shrink-to-fit behavior, but what if we wanted to center it? min-content allows us to center it:

<figure>
  <img src="http://placekitten.com/400/200" alt="" />
  <figcaption>What a lovely kitten we got there in this image which is encapsulted in a figure element. How dear, look how long this caption is!</figcaption>
</figure>

figure {
  width: -webkit-min-content;
  width: -moz-min-content;
  width: min-content;
  margin: 1em auto;
  background: #EFEFEF;
  border: 1px solid rgba(0,0,0,.1);
  padding: 1em;
}

img {
  display: block;
}

figcaption {
  padding: 1em 0;
}

Because we’ve assigned min-content to the figure element, it takes the minimum width it can have when taking all soft wrap opportunities (like spaces between words) so that the content still fits in the box.

max-content

The max-content property refers to the narrowest measure a box could take while fitting around its content – if no soft wrap opportunities within the element were taken.

Check out what happens if we apply this to our simple kitten/figure demo:

<figure>
  <img src="http://placekitten.com/400/200" alt="" />
  <figcaption>What a lovely kitten we got there in this image which is encapsulted in a figure.</figcaption>
</figure>

figure {
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  margin: 1em auto;
  background: #EFEFEF;
  border: 1px solid rgba(0,0,0,.1);
  padding: 1em;
}

img {
  display: block;
}

figcaption {
  padding: 1em 0;
}

Because the caption is very longer than the image is wide (it doesn’t take any soft wrap opportunity, like the spaces between words), it means it has to display the caption on a single line, thus the figure is as wide as that line.

fill-available

???. One of life’s great mysteries.

fit-content

The fit-content value is roughly equivalent to margin-left: auto and margin-right: auto in behaviour, except it works for unknown widths.

For instance, let’s say we need to center an inline navigation across the page. Your best bet would be to apply text-align: center to the ul, and display: inline-block to the li. This would give you something like this:

<ul>
  <li>Home</li>
  <li>News</li>
  <li>About</li>
  <li>Contact</li>
</ul>

ul {
  background: deepskyblue;
  padding: 1em;
  text-align: center;
}

li {
  display: inline-block;
  background: tomato;
  padding: .5em;
}

However, the blue background (from the ul element) spreads across the entire document because the ul is a block-level element, which means its width is restricted only by its containing element. What if we want to have the blue background collapsing around the list items? fit-content to the rescue!

<ul>
  <li>Home</li>
  <li>News</li>
  <li>About</li>
  <li>Contact</li>
</ul>

ul {
  background: deepskyblue;
  padding: 1em;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 1em auto;
}

li {
  display: inline-block;
  background: tomato;
  padding: .5em;
}

With fit-content and margin: 1em auto, this works like a charm and only the navigation has a colored background, not the whole document width.

If you’re into this sort of thing, you’ll be happy to know the formula to define the size of a fit-content length is:

fit-content = min(max-content, max(min-content, fill-available))

This is a pretty unused value, so if you come up with a great use-case, let use know!

Related Properties

• height
• min-width
• max-width

Browser Support

For normal length values (e.g. px)

If authors choose rem units for width, be mindful that this unit of measurement is not supported in versions of IE 8 and below.

For min-width and max-width

For the keyword values

• All values need to be prefixed by either -webkit- or -moz- (depending on the vendor)
• Kinda for Firefox means it supports available rather than fill-available

Prefixing with Sass

The prefixing for these is a bit tricky, since only a few are required and they differ from browser to browser. Here is a Sass @mixin to help:

@mixin intrinsic($property, $value) {
  @if $value == fit-content or $value == min-content or $value == max-content {
    #{$property}: -webkit-#{$value};
    #{$property}: -moz-#{$value};
    #{$property}: $value;
  }

  @else if $value == fill-available or $value == available {
    #{$property}: -webkit-fill-available;
    #{$property}: -moz-available;
    #{$property}: fill-available;
  }

  @else {
    #{$property}: $value;
  }
}

And you can use it like this:

.element {
  @include intrinsic(width, min-content);
}

Which generates this CSS:

.element {
  width: -webkit-min-content;
  width: -moz-min-content;
  width: min-content;
}

The post width appeared first on CSS Park.

@media print {
  p {
    widows: 3;
  }
}

If a paragraph can’t fit on one page in its entirety, it is split wherever it is possible. That way single lines of a paragraph can appear on page before it continues on the next page. This is usually unwanted so many word processors require at least two lines to be left on an old page, instead of one. The orphan property acts similar. You can give it either a positive number (where 2 is the default) or inherit.

Note that the widows property does not generally affect non-paged media such as screen. However, browsers supporting both widows and columns will apply the intended functionality to columns as well. Also, the property only affects block-level elements.

Related

• orphans

Browser Support

Chrome	Safari	Firefox	Opera	IE	Android	iOS
25+	None	None	9.2+	8+	None	None

The post widows appeared first on CSS Park.

<div>
   A bunch of words you see.
</div>

You’ve styled the div to have a set width of 100px. At a reasonable font size, that’s too much text to fit in 100px. Without doing anything, the default white-space value is normal, and the text will wrap. See the example below.

div {
  /* This is the default, you don't need to
     explicitly declare it unless overriding
     another declaration */
  white-space: normal; 
}

If you want to prevent the text from wrapping, you can apply white-space: nowrap;

Notice in HTML code example at the top of this article, there are actually two line breaks, one before the line of text and one after, which allow the text to be on its own line (in the code). When the text renders in the browser, those line breaks appear as if they are stripped out. Also stripped out are the extra spaces on the line before the first letter. If we want to force the browser to display those line breaks and extra white space characters we can use white-space: pre;

It’s called pre because the behavior is that as if you had wrapped the text in <pre></pre> tags (which by default handle white space and line breaks that way). White space is honored exactly as it is in the HTML and the text does not wrap until a line break is present in the code. This is particularly useful when literally displaying code, which benefits aesthetically from some formatting (and some time is absolutely crucial, as in white space dependent languages!)

Perhaps you like how pre honors white space and breaks, but you need the text to wrap instead of potentially break out of its parent container. That’s what white-space: pre-wrap; is for:

Finally, white-space: pre-line; will break lines where they break in code, but extra white space is still stripped.

Interestingly, the final line break is not honored. As per the CSS 2.1 spec: “Lines are broken at preserved newline characters, and as necessary to fill line boxes.” so perhaps that makes sense.

Here is a table to understand the behaviors of all the different values:

In CSS3, the white-space property is literally going to follow that chart and map the properties to text-space-collapse and text-wrap accordingly.

Browser Support

Little more complex than the regular support table, since each value has different levels of support:

The post white-space appeared first on CSS Park.

p {
  visibility: hidden;
}
tr {
  visibility: collapse;
}

visibility has four valid values: visible, hidden, collapse, and inherit. We’ll go through each of them to learn more.

visible

Just like it sounds, visible makes things visible. Nothing is hidden by default, so this value does nothing unless you have set hidden on this or a parent of this element.

hidden

The hidden value hides things. This is different than using display: none, because hiddenonly visually hides elements. The element is still there, and still takes up space on the page, but you can’t see it anymore (kind of like turning the opacity to 0). Interestingly, this property does not inherit by default. That means that, unlike the display or opacity properties, you can make an element hidden, and still have one of its children as visible, like this:

<div class="hidden">
  Hi, I'm hidden. Notice that all of my styling is hidden as well, and that I still take up space, even though you can't see me.
  <div class="visible">
    Howdy, my parent element is hidden, but I'm still visible. <br>Hover over me to make my parent visible.
  </div>
</div>

.hidden {
  visibility: hidden;
  background: pink;
  border: 10px dotted teal;
  padding: 10px;
  &:hover {
    visibility: visible;
  }
}
.visible {
  border: 1px solid black;
  visibility: visible;
}

Notice that, while hidden, the parent element doesn’t trigger the :hover.

collapse

This one only effects table rows (<tr>), row groups (like <tbody>), columns (<col>), column groups (<colgroup>), or elements made to be that way via display). Unlike hidden, this value hides the table sub element, without leaving the space where it was. If used anywhere but on a table sub element, it acts like visibility: hidden.

There are so many quirks with this it’s hard to know where to begin. Just as an appetizer:

• Chrome/Safari will collapse a row, but the space it occupied will remain. And if the table cells inside had a border, that will collapse into a single border along the top edge.
• Chrome/Safari will not collapse a column or column group.
• Safari collapse a table cell (wrong) but Chrome will not (right).
• In any browser, if a cell is in a column that is collapsed (whether or not it actually collapses) the text in that cell will not be displayed.
• Opera (pre WebKit) will collapse the crap out of everything, except a table cell (which is correct).

There is more, but basically: don’t use this ever.

inherit

The default value. This simply causes the element to inherit the value of its parent.

Flexbox

visibility: collapse; is used in Flexbox as well, and more well definied (and presumably implemented but I haven’t tested yet).

Related Properties

• The display property
• The opacity property

Browser Support

The basics, not considering all the quirks with collapse:

IE 7- doesn’t support collapse or inherit.

The post visibility appeared first on CSS Park.