Long Text Wrapping in ie9/10 inside table td

Both IE 9 and 10 seem to have problem wrapping long text inside table td element, even we explicitly set the the word-wrap CSS property.

Turns out the solution is we also have a set with and table-layout css to the wrapping table.

/* Both of them are Necessary.*/
.long-text-table {  
  table-layout:fixed;
  width:100%;
}
.long-text-wrapper{
  word-wrap:break-word;
}

HTML:

<table class="long-text-table">
 <tr>
  <td>
   <div class="long-text-wrapper"> REALLY LONG TEXT NEED TO WRAP</div>
  </td>
 </tr>
</table>

3d css with perspective and transform rotate

The perspective CSS property gives an element a 3D-space by affecting the distance between the Z plane and the user.

The strength of the effect is determined by the value. The smaller the value, the closer you get from the Z plane and the more impressive the visual effect. The greater the value, the more subtle will be the effect.

Important: Please note the perspective property doesn’t affect how the element is rendered; it simply enables a 3D-space for children elements. This is the main difference between the transform: perspective() function and the perspective property. The first gives element depth while the later creates a 3D-space shared by all its transformed children.

/**
 * Syntax
 * perspective: none | &lt;length&gt; 
 */

.parent {
    perspective: 1000px;
}

.child {
    transform: rotateY(50deg);
}

Here in the bottom is the some other examples to create cool 3d with hover (transform: rotate(0))effect.

target pseudo class in css3

Basically the :target pseudo selector in CSS matches when the hash in the URL and the id of an element are the same.

we can define ‘:target’ for general purpose.

We can also use it with other css selectors to define specific matching rules.

So if we have a http://www.abc.com/index.html#myHash and in the css we have myHash:target{something}

Then the something will be applied to the id=myHash div or whatever container when the anchor <a href=’#myHash‘></a> is clicked.

 

 

Psuedo class is good for creating css only modal window. And here is the fiddle.

W3School has some good example about :target.

some other example in css-tricks

This is an interesting way of building modal with JS using IIFE and in an OO way.

 

transition vs animation in css

CSS animation is definitely the next big step in CSS. Absolutely amazing things can be done with this. It is literally up to your imagination, as you’ll come to realize if you don’t already understand how CSS animations work. HTML5 and javascript continues to replacing what Flash was previously used for, and similarly CSS continues to replace functionality javascript was used to provide. In this article we’re going to cover the CSS animation basics and make sure we’ve learnt it well enough to add it to our development-toolbox.

So, what’s the difference between the Transition property and the Animation property?

There are two basic differences:

  1. The first major difference is that transitions only have a ‘to’ and ‘from’ state. Transitions also only effect once a pseudo class (such as :hover, :focus, :checked, etc) is triggered or removed.
  2. The second notable difference between animations and transitions are @keyframes. Transitions only have two @keyframes (the ‘to’ and ‘from’ states), but animations can have an endless number of @keyframes. The keyframe positions are set with percentage values. You could make a ball spin and bounce up and down with only few lines of CSS (Sort of. Since you’ll have to do everything multiple times with vendor prefixes, the CSS gets quite a bit longer).

Animation syntax

The animation property and keyframes go hand in hand. The animation property’s ‘values’ are the element-to-be-animated’s options and the keyframes are the actions it should follow.

A simpler way to put it is:

Animation: How to animate – duration, speed, etc.
Keyframes: The properties to animate – From/To.

The following animation property is shorthand for the various CSS properties which will be covered later in this section.

#element { animation: name duration timing-function delay iteration-count direction; }
@keyframes name {
     0% { property: value1; }    //Start of animation duration
     35% { property: value2; }   //35% through the animation duration
     100% { property: value3; }  //End of animation duration
}

animation-name

The name of the animation. This value links the animation properties to the keyframes. This value is required, without this the keyframes can’t be referenced.

animation-duration

The time it takes for the animation to complete in seconds.

animation-timing-function

Supported timing-function keywords are: linear, ease, ease-in, ease-in-out, ease-out, step-start, step-end. The cubic-bezier() CSS function is supported by animation-timing-function and can be used to create custom timing-functions.

If left out, this property defaults to ease.

animation-delay

The amount of time, in seconds, waited before the animation begins after the animation has been applied to the element.

If left out, this property defaults to 0s.

animation-iteration-count

The amount of times the animation should run. Negative values are treated as 1 and fraction values play that fraction of that animation. For example 1.5 will play through the animation 1 time and stop halfway through the second iteration. “infinite” does what you’d imagine, it doesn’t stop the animation.

If left out, this property defaults to 1.

animation-direction

The direction of the animation. This property has 4 values: normal, alternate, reverse, alternate-reverse.

The “normal” state would play through the keyframes from the lowest percentage to the highest. This property can be set to “reverse” where it will play from 100% down to 0%.

“alternate” runs the animation in reverse every second iteration, so the animation goes from 0% to 100% the first time and then from 100% to 0% the second time and repeats that pattern. This is property gives the effect that the animation doesn’t restart.

“reverse” runs the keyframes in reverse, for example it begins at 100% and ends at 0%.

Lastly, “alternate-reverse” begins at 100% and reverses every second iteration.

If left out, this property defaults to ‘normal’.

CSS Keyframes

Along with the animation-name, keyframes are the most important aspects of CSS animations. Keyframes are the animation instructions.

Percentage values are used to indicate the point at which the values of a keyframe should be achieved. The “from” keyword references 0% and the “to” keyword references 100%. Functionally the following is identical:

@keyframes example {
    0% { bottom: -90px; right: -40px; }
    100% { bottom: -90px; right: -40px; }
}
And
@keyframes example {
    from { bottom: -90px; right: -40px; }
    to { bottom: -90px; right: -40px; }
}

Quick demonstration based on the previously covered properties

http://jsfiddle.net/cssplus/kL8Yk/embedded/result,html,css

In the above example I’ve made use of:

  1. animation-name
  2. animation-duration
  3. animation-timing-function
  4. animation-iteration-count

The 4 “ball” keyframes are telling the element to animate through each of the 4 keyframes within 6 seconds, while making use of a the boring ‘ol linear timing-function and to do this indefinitely.

As you can see, the keyframes syntax is similar to the media query syntax (And SCSS!) – which most people have been exposed to. Hopefully that makes you feel more at home!

That’s really all there is to it. Let’s go over a more detailed tutorial to make this even more digestible.

Simple tutorial

First we have to come up with a cool animation idea. I’m a big fan of Paul Irish (and you should be too) so I’m going to do some sort of animation involving him.

I’ve taken this image and cut out the arm quite badly, so I have two images. The plan is to layer the arm on top of the larger image and animate it.
First we need to define the html


    

 

Next, the CSS

#paul {
   background: url(../img/paul-bg.jpg) no-repeat left top;
   height: 450px;
   margin: 0 auto;
   overflow: hidden;
   width: 600px;
   position: relative;
}
#paul .arm {
   animation: pumping-iron 2s ease-out alternate infinite;
   position: absolute;
   right: -40px;
   bottom: -90px;
}
@keyframes pumpingIron {
    0% { bottom: -90px; right: -40px; transform: rotate(20deg); }
    100% { bottom: -20px; right: 70px; transform: rotate(-20deg); }
}

So a recap of the above CSS:

  1. Set the basic properties to #paul
  2. Absolutely position .arm and set the animation property with the relevant values. I’ve named the animation “pumping-iron”, set the animation-duration to 3s, used the boring-old linear timing-function and set the loop to infinite because Paul never gets tired of pumping-iron.
  3. Keyframe #1 sets the starting position of Paul’s arm and keyframe #2 sets the end position. The animation-direction value “alternate” tells the animation that once it has completed, it should alternate the keyframes. This brings the animation back to the starting position. The animation-iteration-count value “infinite” tells the animation to continue forever.

You would really feel the vendor-prefixes on this one. A prefix on the @keyframes means you duplicate that entire keyframe section 5 times! Looking at the prefixed version of animation and @keyframes is definitely intimidating, but as long as you realize it’s just CSS bloat you should be fine. Let’s take a look at this for visual reference… Be prepared:

#paul .arm {
    -webkit-animation: pumping-iron 2s ease-out alternate infinite;
    -moz-animation: pumping-iron 2s ease-out alternate infinite;
    -ms-animation: pumping-iron 2s ease-out alternate infinite;
    -o-animation: pumping-iron 2s ease-out alternate infinite;
    animation: pumping-iron 2s ease-out alternate infinite;
}
@-webkit-keyframes pumping-iron {
    from { bottom: -90px; right: -40px; -webkit-transform: rotate(20deg); }
    to { bottom: -20px; right: 70px; -webkit-transform: rotate(-20deg); }
}
@-moz-keyframes pumping-iron {
    from { bottom: -90px; right: -40px; -moz-transform: rotate(20deg); }
    to { bottom: -90px; right: -40px; -moz-transform: rotate(20deg); }
}
@-ms-keyframes pumping-iron {
    from { bottom: -90px; right: -40px; -ms-transform: rotate(20deg); }
    to { bottom: -90px; right: -40px; -ms-transform: rotate(20deg); }
}
@-o-keyframes pumping-iron {
    from { bottom: -90px; right: -40px; -o-transform: rotate(20deg); }
    to { bottom: -90px; right: -40px; -o-transform: rotate(20deg); }
}
@keyframes pumping-iron {
    from { bottom: -90px; right: -40px; transform: rotate(20deg); }
    to { bottom: -90px; right: -40px; transform: rotate(20deg); }
}

And now for the final product!

http://jsfiddle.net/cssplus/5Wny8/3/embedded/result,html,css/

Cross Browser compatibility

To quote HTML5Please: “For now, either use animations only to provide non-essential aesthetic enhancements or use feature detection to provide an alternative experience for browsers that do not support this feature.”
Currently all modern browsers and/including IE10 support CSS animations with a vendor prefix. Next time you come across an animation you need to add, use CSS animations and either fall back to no animation or use Modernizr to detect for the support and fall back to the javascript you would have added anyway. Viva la progressive enhancement.

…And because Modernizr is so damn cool and simple to use I’ll briefly explain how exactly to make use of this feature detection and fallback option.

http://jsfiddle.net/cssplus/AWF4p/1/embedded/result,html,css/

Modernizr adds various classes to the HTML element depending on whether the browser supports a feature or not. You could make use of classes such as .boxshadow, .no-boxshadow, .borderradius, .no-borderradius, etc. This puts the power of feature detection right into the CSS which is great and easy to make use of. You could also do more intricate feature detection by using their Modernizr javascript object.

Conclusion

I think you should all be using CSS animations right now, provided you include the vendor-prefixed versions and have a decent fallback for non-modern browsers.

 

From here

And the MDN’s animation example 

Another step by step guide for keyframe css animation

Bootstrap 3 Grid system

cascades up grid definition

The new Bootstrap grid system applies to mobile first. When you declare a specific grid size, that is the grid for that size and above. This can be a little hard to grasp at first so here’s an example.

For example, let’s say you want a site that has:

  • 1 column on extra small devices
  • 2 columns on small AND medium devices(6 6….)
  • 4 columns on large devices(3 3 3 3…)

Since the grid system now cascades up from mobile devices, this is how this code will look.

<div class="row">
    <div class="col-sm-6 col-lg-3">
        This is part of our grid.
    </div>
    <div class="col-sm-6 col-lg-3">
        This is part of our grid.
    </div>
    <div class="col-sm-6 col-lg-3">
        This is part of our grid.
    </div>    
    <div class="col-sm-6 col-lg-3">
        This is part of our grid.
    </div>    
</div>

We don’t have to define anything for extra small devices since the default is one column. We have to define a grid size for small devices, but not for medium devices. This is because the grid cascades up. So if you define a size at sm, then it will be that grid size for sm, md, and lg.

Grid Size

You could realistically have your site show a different grid on 4 different browser sizes. Below is the breakdown of the different sizes.

.col-xs-$ Extra Small Phones Less than 768px
.col-sm-$ Small Devices Tablets 768px and Up
.col-md-$ Medium Devices Desktops 992px and Up
.col-lg-$ Large Devices Large Desktops 1200px and Up

The official Bootstrap docs offer a much more comprehensive understanding of how the grid works. Take a look at those to get a more solid overview of column sizes, gutter sizes, maximum column sizes, and the max-width of your overall site based on browser size.

From here where provides more example for things like make certain content only viewable in lg using ‘visible-lg‘.

version compress css js with maven

One problem in release is the user still caches our resources that our new look/feel can not be presented unless user hard refresh the browser.

To overcome this, several ways:

1. append a query string(like UUID) to the resource

This is good if you want to user download a fresh copy each request. If we randomize the query string with every request, this will defeat caching entirely. This is rarely/never desirable for a production application’s CSS.

Add a <%@ page import=”java.util.UUID” %> to the head of jsp and append the uuid to the resource by adding:

<script type=”text/javascript” language=”javascript” src=”dir/gwt_whatever.nocache.js?<%=UUID.randomUUID().toString()%>“></script>

2. use a new name each build

The yuicompressor-maven-plugin has a <suffix> option to let you add suffix to the resource after compression.

3.append a query String (like build date) to the resource

This is actually the way i used. The good part is it still keeps the file name, user could still get a new version for the each release. To achieve this.

3.1 add a property in the pom. This way we have a timestamp var available.

		<timestamp>${maven.build.timestamp}</timestamp>
		<maven.build.timestamp.format>yyyy-MM-dd</maven.build.timestamp.format>

3.2 add resource in the war plugin to filter the web.xml so that we could replace variables

<webResources>
    <!--compressed resources, see yuicompressor-maven-plugin below for detail-->
    <resource>
        <directory>${project.build.directory}/min</directory>
    </resource>
    <!--this is to replace the ${...} with our maven properties. For example the timestamp property replacement in the web.xml-->
    <resource>
        <directory>${basedir}/src/main/webapp/WEB-INF</directory>
        <filtering>true</filtering>
        <targetPath>WEB-INF</targetPath>
        <includes>
            <include>**/web.xml</include>
        </includes>
    </resource>
</webResources>

For the yuicompress maven plugin config:

			
<plugin>
    <groupId>net.alchim31.maven</groupId>
    <artifactId>yuicompressor-maven-plugin</artifactId>
    <version>1.5.1</version>
    <executions>
        <execution>
            <goals>
                <goal>compress</goal>
            </goals>
        </execution>
    </executions>
    <configuration>
        <nosuffix>true</nosuffix>
        <excludes>
            <exclude>**/*.min.js</exclude>
            <exclude>**/jquery*.js</exclude>
            <exclude>**/angular*.js</exclude>
            <exclude>**/*.min.css</exclude>
            <exclude>**/jquery*.css</exclude>
        </excludes>
        <!--maven war plugin will overwrite the file we compressed, so we add a 'webappDirectory' here to put them into the /min directory and
					    then in the maven-war-plugin define this /min directory as a <resource> to make sure they could be included-->
        <webappDirectory>${project.build.directory}/min</webappDirectory>
    </configuration>
</plugin>

3.3 Add an init-param in the web.xml. Note the ${timestamp} will be replaced by the maven time stamp because of the filtering config we have in 3.2 and the property definition in 3.1

  <context-param>
    <param-name>buildTimeStamp</param-name>
    <param-value>${timestamp}</param-value>
  </context-param>

3.4 now the ‘buildTimeStamp’ is available for us in the jsp context, we just need to include it:

<link rel="stylesheet"
href="/css/whatever.css?build=<c:out value='${initParam.buildTimeStamp}'/>"
type="text/css">

 

page-break property in css

There isn’t an actual page-break property in CSS. It is actually a set of 3 properties: page-break-before, page-break-after and page-break-inside. These properties help define how the document is supposed to behave when printed. For example, to make a printed document more book-like.

Properties

page-break-before

The page-break-before property adds a page-break before the element to which it is applied.

Note: this property is in progress of being replaced by the more generic break-before property. This new property also handles column and region breaks while being syntactically compatible with page-break-before. Thus before using page-break-before, check if you can use break-before instead.

A common use case for this is to apply it to the selector #comments so a user printing a page with comments could easily choose to print the whole document but stop before the comments cleanly.

page-break-after

The page-break-after property adds a page-break after the element to which it is applied.

Note: this property is in progress of being replaced by the more generic break-after property. This new property also handles column and region breaks while being syntactically compatible with page-break-after. Thus before usingpage-break-after, check if you can use break-after instead.

page-break-inside

The page-break-inside property adds a page-break inside the element to which it is applied.

Syntax

page-break-after  : auto | always | avoid | left | right
page-break-before : auto | always | avoid | left | right
page-break-inside : auto | avoid

The left and right values for page-break-before and page-break-after refer to a spread layout (like a book) where there are distinct left and right pages. They work like this:

  • left forces one or two page breaks after the element so that the next page is formatted as a left page.
  • right forces one or two page breaks after the element so that the next page is formatted as a right page.

Consider always as a mix of both. The specification says:

A conforming user agent may interpret the values ‘left’ and ‘right’ as ‘always’.

Example

@media print {
  h2 { 
    page-break-before: always;
  }
  h3, h4 {
    page-break-after: avoid;
  }
  pre, blockquote {
    page-break-inside: avoid;
  }
}

This code snippet does 3 things:

  • it forces a page-break before all h2 headings (perhaps h2 tags in your document are chapter titles that deserve a fresh page)
  • it prevents page-breaks right after sub-headings because that looks odd
  • it prevents page-breaks inside pre tags and block-level quotes

It could also be applied to @media page when handling PDF file using flying saucer

REference 1 , reference 2