CSS3 part 2. More CSS3 properties: 2-D transforms, transitions, animations, multicolumn layout and Compositing and Blending properties. Activity: Use these properties in class. Activity: In-class Workshop.
1) For class: Use the new CSS3 properties to create a simple animatic for your final project. Animate elements created in the previous homework. 2) For final: Finish wireframe and Photoshop Comp for Final. Read chapter 14. Due: The following week.
Materials
Additional materials for this unit can be found by following these links (14 pages):
Your worksheet needs to reflect your final project, and it is due today (the work-sheet, not the final, with research, wireframe, comp and user experience profiles, including links where necessary).
Create a mockup and develop a look that sells your project. This can build upon the CSS3 assignment from last week.
Translate the structure of the comp into a wireframe
Develop coherent user experience profiles.
Homework for the Unit
Using these new CSS3 properties, create an animatics or animated page that sells your project.
It’s possible to animate the elements created in the previous homework.
Make sure that you use at least two transforms, transitions and an animation.
Ideally you animate everything by hand, but I will understand if you use Adobe Edge.
A link to this promotional material has to be on the work-sheet.
Apple’s Webkit team has introduced a number of technologies, one of which is CSS Animations, which allow an author to modify CSS property values over time. This is an evolving specification. Expect lots of changes as time goes by.
The good news is that animations are hardware accelerated. The computer’s graphic chip will be doing the heavy lifting, and not the CPU. This should speed animations up from the start.
Involved animations are complicated, and I’m sure that the future will develop all kinds of tools that will help facilitate building more complicated animations. To that end, there are several programs targeting the creation of CSS animations, primarily targeting the building of ads without using Flash, including Sencha’s Animator, Adobe’s Edge and andyclarke. Be aware that most of these solutions rely on javascript for their animations, but since the program is writing the code, all you need to deal with is a timeline interface.
@Keyframe
You have seen these @ rules used before, in @media, @font-face and @import. At-rules are instructions or directives to the CSS parser. The @keyframe contains the keyframes of the animation. The way to write it is:
In between the brackets are the rule sets, which always start with the start and stop keyframes: from or 0% and to or 100%. The entire keyframe at rule looks like:
@-webkit-keyframes name-for-animation {
0% /* from */{
}
100% /* to */ {
}
}
All other reframes come between the start and end, and you can use from and to, or 0% and 100% keyframes. To make it work, however, you also need to include the animation name as a quality of the animation property.
In the demo below, the div with and id of “ani-1” contains the animation property shorthand that calls up the keyframe at rule. Within this property we’re specifying the name of the animation animation-name: name-for-animation, to specify which keyframes to use, the duration, animation-duration: 10s, the timing function: animation-timing-function: linear and the number of times to repeat the keyframes animation-iteration-count: infinite. There is also a direction property animation-direction: normal, and the possibility to set a delay animation-delay: 0.
You can change the animation, but to get the demo to register the changes, you need to temporarily change the keyframe name in the animation property, and then change it back, and it will recognize any changes you’ve made to the keyframes, otherwise it will continue on its previously determined course. The animation is set up for webkit only.
CSS Code View
Animation is in its infancy, and the specification will evolve and probably change several times before it settles down, but it’s actively being implemented by all major browsers, so its here to stay. If you want to pursue CSS animations, check out CSS3 Animator for a great resource.
CSS Animations first made their appearance in Surfing Safari, the blog devoted to Apple’s Webkit browser. I had to have the most recent nightly build to see the animation, and was, of course, amazed to see leaves fall or basic shape animation (these demos only work in Webkit browsers).
That was two years ago. Since then the standards compliant browsers have picked this up and it has since been submitted as a standard.
Since the release, the transformations have been offloaded to the computer’s graphic chip, meaning that they are smoother and faster than CPU driven animation using Javascript.
Transition Between Pseudo Classes
Transitions describe how CSS properties can be made to change smoothly from one value to another over a given duration. By default, this duration for pseudo classes is instantaneous, as demonstrated by the change when hovering over this element. The change in appearance is the difference between the element’s description and the pseudo class :hover. It goes from background: purple; to background: blue; as soon as the mouse hovers over the element.
Instead of making this change instantaneously, a transition gives this change a duration. You can see that the transition property is specified as a change in the background color, with a duration of 4 seconds. The before and after states are determined by the differences in the element’s description and the description of its hover state.
CSS Code View
When you hover over the div, the transition from purple to blue takes 4 seconds.
A good use for this transition effect is to animate the opacity between two pictures.
CSS Code View
Adjusting the Rate of Change
The transition velocity can be controlled. In addition to the default transition timing function, there are a number of other timing functions based on 5 predefined cubic bézier curves that control the rate of change during the transition function. Each box below has the same transformation but as you roll over the example, it demonstrates the different transition timing functions, as labeled.
You can create the rate of change curve yourself by specifying the x and y coordinates of the two bézier control handles associated with the starting and end points. In the last example, it is transition-timing-function: cubic-bezier(0,1,1,0);. An ease-in curve would be defined as cubic-bezier(0.42, 0, 1, 1); and an ease-out curve would be defined as cubic-bezier(0, 0, 0.58, 1), the first brings the curve down while the second pushes it over the linear progression of (0, 0, 1, 1). You can try this yourself by changing the numbers below and hovering over the demo above:
CSS Code View
default »
linear »
ease-in »
ease-out »
ease-in-out »
cubic-bezier »
This injects a bit of AfterEffects into web presentations, though it is much more limited in scope. There is much more promise of that with CSS3 animations.
What Attributes can be changed?
The W3 has the following list of properties that can be changed in a transition.
The web browser lays out the page according to a coordinate system that, by default, is expressed in pixels and has the X and Y Zero point in the upper left hand corner of the parent object, like InDesign. Illustrator places it on the lower right hand corner, the way you learned it in geometry.
2D Transform
The transform property modifies this coordinate space, so that elements can be translated, rotated and scaled in this two dimensional space. When you create a value for the transform property, a new local coordinate system is established by which the position of the element is calculated. The 2D transforms add up, meaning that if you rotate the parent element, and then rotate the child element, the child will be rotated in addition to the parent’s rotation. The coordinate system then calculates the cumulative transformation matrix (CTM) for the element.
You can apply two different transforms to the X and Y axis with the transform property values transform: <transform-function for X> <transform-function for Y>; where the 2D transform functions are listed in length or percentages and angles in degrees, grads, radians or turns (according to the CSS3 values and units):
matrix(number, number, number, number, number, number)
Matrix specifies a 2D transformation in the form of a transformation matrix of six values. matrix(a,b,c,d,e,f) is equivalent to applying the transformation matrix [a b c d e f].
translate(value for x, value for y)
translate specifies a 2D translation by the vector [tx, ty], where tx is the first translation-value parameter and ty is the optional second translation-value parameter. If <ty> is not provided, ty has zero as a value.
translateX(value)
Translate X specifies a translation by the given amount in the X direction.
translateY(value)
Translate Yspecifies a translation by the given amount in the Y direction.
scale(value for x, value for y)
Scale specifies a 2D scale operation by the [sx,sy] scaling vector described by the 2 parameters. If the second parameter is not provided, it is takes a value equal to the first.
scaleX(value)
Scale X specifies a scale operation using the [sx,1] scaling vector, where sx is given as the parameter.
scaleY(value)
Scale Y specifies a scale operation using the [1,sy] scaling vector, where sy is given as the parameter.
rotate(angle)
Rotate specifies a 2D rotation by the angle specified in the parameter about the origin of the element, as defined by the transform-origin property.
skewX(angle)
Skew X specifies a skew transformation along the X axis by the given angle.
skewY(angle)
Skew Y specifies a skew transformation along the Y axis by the given angle.
skew(angle, angle)
Skew X and Y specifies a skew transformation along the X and Y axes. The first angle parameter specifies the skew on the X axis. The second angle parameter specifies the skew on the Y axis. If the second parameter is not given then a value of 0 is used for the Y angle (ie. no skew on the Y axis).
If your object is small, it is not a problem to establish its position on the default coordinate system, and tweaking its relative position if need be, but for some objects, it is better that you control the point of the transformation, which by default is the midpoint of the object.
You can set the 0,0 point to determine the point of transformation using percentage, length, or keyword like left, center and right for the X axis and top, center and bottom for the Y axis: transform-origin: left top
If only one element is is specified, the second value is assumed to be center.
Transform can be used locally or global. First, it is a local way of turning objects that does not involve the structure of the layout itself. The second way is to transform large parts of the document, and since the children inherit the parent’s transforms, all the children will take on that transformation.
Local Transforms
CSS Code View
The content (children) of the transformed element inherit the altered coordinate space, and transform with it, such as this text and image.
global Transforms
Here you will transform the entire content element on this page from the center, with everything on it. Every child element gets transformed with the parent.
Change the values for both the transform origin and the transform scale, rotate, transform and skew. Careful, for you can lose the ability to edit this if you make too radical a change, and will need to refresh the page to reset it. Try rotating the element by 90°, 180° or 360 degrees.
A lot of activity is happening with these tools, and you can expect Illustrator-like drawing programs at the front end that use CSS and HTML as the backend language. Check out this text on a path generator and don’t forget to look at his explanation of Natural Object-Rotation with CSS Transform 3D and pop-up book example.
ImaginethatthisisonlyHTMLmarkupstyledwithCSS!
Transition and Transform Animations
It’s possible to animate the transformations using the psudo class hover. Much like the transition effect applied to the alpha of the overlying picture to make it fade upon hover, using transformations enhance the effect.
Add to the X and Y axis a z axis, and you go from 2D to 3D. There are a number of additional 3D functions addressing the 3D space:
matrix3d(number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number)
Matrix 3D specifies a 3D transformation as a 4×4 homogeneous matrix of 16 values in column-major order.
translate3d(value for x, value for y)
Translate 3D specifies a 3D translation by the vector [tx,ty,tz], with tx, ty and tz being the first, second and third translation-value parameters respectively.
translateZ(value)
Translate Z specifies a 3D translation by the vector [0,0,tz] with the given amount in the Z direction.
scale3d(value for x, value for y, value for z)
Scale 3D specifies a 3D scale operation by the [sx,sy,sz] scaling vector described by the 3 parameters.
scaleZ(value)
Scale Z specifies a 3D scale operation using the [1,1,sz] scaling vector, where sz is given as the parameter.
rotate3d(value for x, value for y, value for z, angle)
Rotate 3D specifies a 3D rotation by the angle specified in last parameter about the [x,y,z] direction vector described by the first three parameters. A direction vector that cannot be normalized, such as [0,0,0], will cause the rotation to not be applied. Note that the rotation is clockwise as one looks from the end of the vector toward the origin. rotateX(angle) is the same as rotate3d(1, 0, 0, angle). rotateY(angle) is the same as rotate3d(0, 1, 0, angle). rotateZ(angle) is the same as rotate3d(0, 0, 1, angle), which is also the same as rotate(angle).
perspective(value)
Perspective specifies a perspective projection matrix. This matrix scales points in X and Y based on their Z value, scaling points with positive Z values away from the origin, and those with negative Z values towards the origin. Points on the z=0 plane are unchanged. The parameter represents the distance of the z=0 plane from the viewer. Lower values give a more flattened pyramid and therefore a more pronounced perspective effect. For example, a value of 1000px gives a moderate amount of foreshortening and a value of 200px gives an extreme amount. The value for depth must be greater than zero, otherwise the function is invalid.
Change the perspective on the example to 200 and see how extreme it becomes, or 500, which is much more normal. Change the rotation, and see the browser render the element as if it were in 3D space.
CSS Code View
The content (children) of the 3D transformed element inherit the altered coordinate space, and transform with it, such as this text and image.
Working in 3D is inherently complex and to do it right requires some calculation and knowledge of 3D. For a better primer check out understanding CSS3D transforms and Natural Object Rotation in 3D by Eleqtiq, who also gave us the CSS3 Text Warping used above. For a 3D matrix transfom tool, check out the Matric Contruction Set by Zoltan. That should get you started.
In the mean time, more browsers are supporting transforms, so it looks like you can use it sooner than later, as long as your design falls back to something presentable on older browsers.
Pong. Remember Pong? I’m sure that most of you only know it as a museum piece. It has been resurrected by Alex Walker as a strictly HTML and CSS3 (no javascript) exercise that works.
Apple’s Webkit team introduced a number of technologies, one of which is CSS Animations, which allow an author to modify CSS property values over time. This is an evolving specification. Expect lots of changes as time goes by.
The good news is that animations are hardware accelerated. The computer’s graphic chip does the heavy lifting, and not the CPU. This speeds animations up from the start.
Involved animations are complicated, and all kinds of tools will be developed to facilitate building more complicated CSS animations. In the mean time, there is a lot you can do and instructions on how to do it by adding class names to your code.
There are several programs targeting the creation of CSS animations, primarily targeting the building of ads without using Flash, including Sencha’s Animator, Adobe’s Edge and Google’s Google Web Designer . Be aware that most of these solutions rely on javascript to help with the CSS3 animations but since the program is writing the code, all you need to deal with is a timeline interface.
@Keyframe
You have seen these @ rules used before, in @media, @font-face and @import. At-rules are instructions or directives to the CSS parser.
What follows are two brackets, and all the code is entered inside. This is referred to as the “code block.”
The @keyframe code block contains the keyframes of the animation. The way to write it is:
In between the brackets are the rule sets, which always start with the start and stop keyframes: from or 0% and to or 100%. The entire keyframe at rule looks like:
@-webkit-keyframes name-for-animation {
0% /* from */{
}
100% /* to */ {
}
}
All other reframes come between the start and end, and you can use from and to, or 0% and 100% keyframes. To make it work, however, you also need to include the animation name as a quality of the animation property.
Now to assign the keyframes. In the demo below, the div with and id of “ani-1” contains the animation property shorthand that calls up the keyframe at rule.
Within this property we’re specifying the name of the animation animation-name: name-for-animation, to specify which keyframes to use, the duration, animation-duration: 10s, the timing function: animation-timing-function: linear and the number of times to repeat the keyframes animation-iteration-count: infinite.
There is also a direction property animation-direction: normal, and the possibility to set a delay animation-delay: 0.
You can change the animation but to get the demo to register the changes, you need to temporarily change the keyframe name in the animation property, and then change it back, and it will recognize any changes you’ve made to the keyframes, otherwise it will continue on its previously determined course. The animation is set up for webkit only.
CSS Code View
The animation could have been optimized. I could have used the transform property, rather than top and left, which is suppose to be faster, and use sub pixel rendering to create a more fluid experience.
Animation is in its infancy, and the specification will evolve and change several times before settling down but it’s actively being implemented by all major browsers and here to stay. If you want to peruse CSS animations, check out Lea Veroa’s Animatable for inspiration.
Interactive Stories/Ads
Digital storytelling — Designing this Interactive HTML5 Storybook is explained in detail at the end of the story.
Flash used to dominate this domain, which was used primarily for ads but was pushed out after stepping foul of Apple’s QuickTime and the popularity of the iPhone. Who wants to pay for ads that wealthy iPhone owners cannot see?
That left a vacuum that CSS3, HTML5, and Javascript are supposed to fill. CSS, HTML, and Javascript are not Flash, and as you can see, even creating basic animation is challenging.
To solve this, both programs provide a drag-and-drop, easy-to-use user interface for creating animation and interactivity using HTML, CSS, and JavaScript. Adobe wants to recapture the Flash market, and Google wants people to create ads because that is where Google makes its money. Google is an expert at the commercialization of goodwill.
Though we have access to both programs, I like the way Google Designer allows me to switch to code view and edit the parameters directly. Adobe Edge Animate requires Edge Code to look at the underlying code and may be more ambitious in the long run but it is not nearly so interesting and useful for us as Google’s Web Designer.
Google Web Designer
Download a copy and use it to do your animatic or motion enabled ad. Instructions on how to use the program can be found on the original download page.
SVG or scalable vector graphics, are waiting to HTML and can be animated. Illustrator can export .svg file format and those can be imported into this online app Svgartista
CSS3 part 1. An examination of CSS3 properties: color, opacity, box shadow, border radius, multiple backgrounds, picture borders and gradients. Activity: Use these properties in class.
1) For class: Use CSS3 properties for a collateral piece promoting your project. It can be a sales poster, an online brochure, or an email advertisement. 2) For final: Research, brand and position for the final project, its target audience, write the copy and develop a look that incorporates the CSS3 properties covered this week. Due: The following week.
Materials
Additional materials for this unit can be found by following these links (33 pages):
Internet marketing, also known as web marketing, online marketing, webvertising, or e-marketing, is referred to as the marketing (generally promotion) of products or services over the Internet. Internet marketing is considered to be broad in scope because it not only refers to marketing on the Internet but also includes marketing done via e-mail and wireless media. Digital customer data and electronic customer relationship management (ECRM) systems are also often grouped together under internet marketing.
You should know what you are selling on the final web site, have done the research, developed the brand and have given the target audience some thought. All of this needs to be documented in the worksheet.
Develop a potential user portfolio and flush out what they would want. Guesstimate their potential browsing habits. Provide an idealized user profile in the worksheet.
As you plan your web site, read through the peer review questions. Let these questions help you in developing your website, as this is the criteria by which the final will be evaluated.
Develop a photoshop comp of the opening page that incorporates both the evaluation criteria of the review questions and the many of the CSS3 techniques covered today. Now that you have an idea of what CSS3 can do, do it!
Homework for the Unit
Use these new CSS3 properties to pull together a collateral piece for your project. It can be a sales poster, an online brochure, or any other kind of promotional material using at least five techniques discussed in class. Include blends, multiple background images, rounded corners, shadows, transparency, etc.
We start with the CSS3 additions that were rolled out first: HSL colortransparencyrounded borders and box shadow. You can be introduced to the properties here pursue them in the exacting details of the W3.org specification itself or use a CSS3 generator to create the code for you.
Hue Saturation and Luminance Color
The first specification to be widely implemented CSS3 color includes opacity and the hue saturation and luminance (HSL) color space.
HSL takes three values: Hue is a degree on the color wheel from 0 to 360 where 0 is red 180 is green and 240 is blue and 360 is red again. So is 720 or any other multiple of 360 — the colors repeat.
Saturation is a percentage value: 100% is full saturation and 0% is no saturation. Saturation works in conjunction with luminance.
Hexadecimal
Percent
#000
0%
#111
7%
#222
13%
#333
20%
#444
27%
#555
33%
#666
40%
#777
47%
#808080
50%
#888
53%
#999
60%
#aaa
67%
#bbb
73%
#ccc
80%
#ddd
87%
#eee
93%
#fff
100%
Luminance is also a percentage; 0% is dark (black) 100% is light (white) and 50% allows for full chroma before it is made lighter or darker. The table on the right gives percentages of grey translated from hexadecimal or base 16 with middle grey being #808080.
Connecting up the color with the degree is the least intuitive part of this more intuitive way to think about color but it is preferred over the RGB method of specifying a color. With hsl it is easy to increase the saturation or luminance for a particular hue something that is not at all intuitive using RGB.
Opacity
CSS3 also added the alpha property transparency or opacity or alpha which can be combined with color to change RGB to RGBA and HSL to hsl. The value range is from 0 to 1 with 0 being transparent and 1 being opaque. That makes .5 half way transparent. color: hsl(0 50% 50% /.5); You can make any element transparent by using the opacity property.
To help you see the relation between the HLS and opacity change the numbers in this demo. I’m sure you have a favorite color or color combination. Try changing some of these colors to your favorite colors:
CSS Code View
Hue is from 0 to 360°: red=0° orange=30° yellow=60° green=120° cyan=180° blue=240° purple=280° magenta=300° pink=320° red=360° and so on for the colors repeat.
Saturation is from 0% to 100%. Luminance is from 0% to 100% with 50% being fully saturated. Transparency is from 0 to 1 with 0 being fully transparent and 1 being fully opaque.
Rounded corners was one of the most requested features and was released early as the work around was complicated and inflexible. We used to create rounded corners by placing a picture of a rounded corner in each of the four corners. No Fun!
Using only one value every corner is rounded an equal amount. Using four values each corner can be given its own unique border. Using eight values or two values for each corner its it possible to create asymmetric or oval corners.
The individual border-radius property can accept either one or two values expressed as a length or a percentage (percentages refer to the corresponding dimensions of the border box). The individual corner are: border-bottom-left-radiusborder-bottom-right-radiusborder-top-left-radius and border-top-right-radius.
When two values are defined they determine the horizontal and vertical radii of a quarter ellipse separately which in turn determines the curvature of the corner of the outer border edge. When only one value is supplied the horizontal and vertical radii are the same. If either value is zero the corner will be square not round. It is possible to go beyond 100% but that begins to eat into the border itself. I pushed the number to distort the border in Safari/Chrome as an example. Play with it and see how it works for you. Check out Diana Smith’s Francine. She goes into how she does it, which is worth a read. In it she shows what happens when she disengages border radius What a difference! She also demos the difference when box shadow and transformation are not engaged.
CSS Code View
Border Radius Shorthand
The border-radius shorthand property can be used to define all four corners simultaneously. If you want to define both horizontal and vertical radii separately for each corner you can do that by first specifying the horizontal for each corner separating them with a slash / and then specifying the vertical radii. For example: border-radius: 30px 80px 30px 80px / 80px 30px 80px 30px; Don’t forget that the shorthand code can be further compacted if the values are the same for example: border-radius: 30px 90px / 110px; The 8 points are masterfully manipulated by the Interactive Border-Radius Tool.
CSS Code View
Box Shadow
Another place that CSS3 has removed the need for additional images is the drop shadow. The browser will handle multiple shadows on both the inside and the outside of the box. The property box-shadow: takes up to five values, one each for x-offset y-offset blur radius spread distance and color.
By default the value for box-shadow is none. If only one number is supplied it determines a drop shadow with the same horizontal and vertical offset and the default color which is black. You can specify the horizontal and vertical distances separately add an optional blur distance and a spread distance as well as the color: box-shadow: 0px 0px 15px 5px #966;.
CSS Code View
By default the shadows are on the outside of the box but it’s possible to place them on the inside of the box by specifying inset. If the inset is in addition to the regular shadow, you need to add a comma , The code for the 3D looking ball then looks like this: box-shadow: 40px 40px 50px -20px #444, inset -40px -40px 50px 25px #666; .
CSS Code View
Multiple shadows, each on its own layer, can be created using a comma , . Learn more about shadows at CSS-Tricks.
This page, originally started in 2011-2, contains three distinct phases. Over time, one phase supersedes the other. Much of the information is not longer relevant but is kept for historical reasons to explain the landscape that currently prevails.
When CSS started out, there was CSS1 and CSS2 (with a .1 and .2 release). This gives the impression that there will be a CSS 3 release. That is no longer the case. CSS has become modularized and no longer has a single monolithic release. Individual modules can attain additional levels, like level 4.
Still, what came after CSS2.2 is known as CSS3. Here is the original Draft written by Eric Meyer in 2000 on the CSS Working Group’s decision to modularize the CSS specification.
The change from CSS2 to CSS3 created a mind-shift from graceful degradation to progressive enhancement.
Phase 1: Graceful Degradation
It used to be (from 2000-2010) that the web designer would work hard to get a website to look the same in all browsers. If that was not possible, every effort was made to achieve that end, or to make the failure appear as graceful as possible, so even older browsers could have well-designed web pages. This required a lot of extra effort for the standards-based community, mostly due to supporting Internet Explorer 6.5.
The Legacy of Internet Explorer 6.5
No one uses IE 6.5 anymore, but in its day, a host of incompatibilities made life for the web developer a living nightmare.
Phase 2: Progressive Enhancement
Tables turned to keep up with shifting browser capabilities. Progressive enhancement replaced graceful degradation. Web sites no longer had to look similar in all browsers. The attitude became that the user should upgrade to the latest browser or eat dog food.
The strategy is the reverse of graceful degradation. A web page is created and styled for the latest browser. As long as that web page is readable on older browsers it’s good enough.
The strategy signified that Internet Explorer 6.5 no longer held web designers hostage, mostly because fewer people were using it. Progressive enhancement felt quite liberating at the time. Internet Explorer 7 and 8 were marginally better that version 6.5. Internet Explorer 9 attempted to be standards compliant. Finally, with Internet Explorer 10, Microsoft updated the browser to be mostly standards compliant. Unfortunately, many people still used older Windows operating environments and continued to use outdated browsers.
Progressive Enhancement is about using the new HTML5 and CSS3 goodness to create websites that, when displayed on non-compliant browsers, break down, sometimes significantly, but such that the important information is still conveyed. The following two pictures demonstrate this difference from http://adactio.com/
This is what a website can look like, in a standard compliant browserAnd this is what the website looks like in I.E 6.5
Browser Support
Support for HTML5 and CSS3 is a moving target. Can I Use? is a website dedicated to updating browser support information.
Vendor Prefixes
A mechanism was required to facilitate the development of new properties as they are introduced on different browsers. This led to vendor specific version of properties that are not yet stable. Those properties can be accessed by using a vendor prefix, with the idea that the prefix can be dropped as the kinks are worked out.
Each of the major browsers has its own prefix:
-webkit- ( Webkit/ Safari/ Chrome)
-moz- ( Firefox)
-ms- ( Internet Explorer, Edge)
-o- ( Opera)
More experimental properties are prefaced with a prefix. To target all browsers, the declaration has to be written five times, one for each browser and the last one without, for when the property achieves acceptance.
This started out as an attempt to avoid the proprietary wars experienced between IE and Netscape, but the ubiquitousness of mobile browsing upended the process as developers were writing only for the WebKit engine. That left other browsers out in the cold. They started to read WebKit prefixes to render pages as a result, making the whole point of the prefixes mute.
Laura Vie created a javascriptroutine that removes the requirement of writing different vendors. Hurrah Lea Verou!! Just include the following code in the head of your page <script src="prefixfree.js"></script> and link it to the javascript from her website. I’ve already included a link on the HTML5 Template that links to a copy of the code on the b.parsons.edu server.
Google VS Apple
That is not the end of the story. Google is introducing its own “blink” rendering engine. The Google / Apple rivalry has erupted at the core of the browser rendering engine. This will be interesting to watch. Google says competition is good and that Apple’s rendering pipeline is not modern enough.
Mozilla is creating a new rendering engine called ”Servo” in collaboration with Samsung, so it looks like there are more possibilities on the horizon.
We will see what this all means. In the meantime, know that browsers have never been better.
Phase 3: Browsers differences are minimized.
Most Browsers today do an excellent job at rendering web pages. The result is that the entire issue is no longer the problem it was in the past.
On Desktops, Google Chome is the top browser. with 56% in worldwide usage, February 2017.
Microsoft killed Internet Explorer (out of shame) and introduced Edge, a standards compliant replacement. IE dropped to 20%, Edge is at 6%
Mozilla’s Firefox remain the alternative browser at 12%.
Safari reins supreme on the Apple OS but as that has a mere 7% market share in operating systems, it does not account for more than 4%.
Mobile is fast becoming the main portal for viewing web pages. Google Chrome has Android phones locked up at 70%.
On the iOS, Safari is the default browser and has 30% of the market. Numbers do not tell the whole story, as the iOS represents a more affluent and tech-savvy user base.
All of this greatly simplifies the building of a web page. The issue today is that the website be responsive to the device it’s on.
