Skip to main content

Differences Between CSS & CSS3

The original Cascading Style Sheets specification, as well as its much more recent CSS3 revision, are technologies used to enhance and format HTML Web pages. CSS was initially designed to handle the presentation layer of a Web page in a more efficient manner than formatting with HTML, which was never intended to handle the complex construction of the contemporary Web. Because CSS2 is a a universally adopted extension of CSS1, the term CSS without a number implies the inclusion of CSS2. The CSS3 spec is still under development as of July 2014, so Web developers need to consider feature support varies between browsers.


CSS3 Is Backwards Compatible With CSS

CSS3 is an update to CSS2 that maintains compatibility with all of CSS's features -- CSS3 doesn't deprecate any of the CSS code. The CSS3 code is designed to make Web pages look better and load faster as well as reduce development time to build pages in a user's browser. CSS3 makes Web design less reliant on image files for page design elements and reduces file transfer requests and download time by using fewer images. CSS1 focused on appearance formatting, whereas CSS2 added positioning capabilities for text and objects. Older browser versions like IE 9 and prior do not widely support CSS3's added features, which can require extra development time to maintain CSS fall-back code.

CSS3 Adds Rounded Corners and Gradients

Prior to CSS3, Web developers needed to design image files to add things like rounded corners for structural borders and background image gradients; CSS3 includes comparable features that can be added with a few lines of code. In CSS, a Web developer has to design a border or gradient, upload it to the image server, place the image on the page and use CSS to correctly position the border. In CSS3, the Web developer can accomplish something similar with code like ".roundBorder{border-radius:10px;}". Background gradients are a bit more complicated and require different code for different browsers. For example, a white-to-black gradient for Chrome and IE uses code like ".gradBG{background: liner-gradient(white,black);}"

CSS3 Adds Animation Features and Text Effects

CSS3 has a handful of features not present in CSS to improve how your page elements look. With CSS3, Web developers can add a text-shadow to text to make it easier to read or add visual flair and can force line breaks within longer words to make them fit inside columns with word wrap. Before CSS3, Web developers needed to code animation in scripting languages like JavaScript and jQuery; CSS3 adds several animation features to the design layer. The W3C is still working on a Web animations standard to work out compatibility issues between the different animation techniques.

CSS3 Defines Text Columns

CSS3 adds the capability to split text sections into multiple columns to read like a newspaper. In the CSS2 spec, Web developers have a difficult time constructing multi-column text sections because the standard is not equipped to automatically split text. Particularly with sites that feature responsive design, a development technique that rearranges and resizes content based on the viewing device's screen resolution, people with larger monitors may have a difficult time reading text rows that sprawl across the scree







Comments

Popular posts from this blog

Woot, 2.4.0 is out! : vue.js

FeaturesFull SSR + async component support in core: SSR now supports rendering async components used anywhere and the client also supports async components during the hydration phase. This means async components / code-splitting now just works during SSR and is no longer limited at the route level. (9cf6646 & 7404091) Easier creation of wrapper components: (6118759) New component option: inheritAttrs. Turns off the default behavior where
parent scope non-prop bindings are automatically inherited on component root
as attributes. New instance properties: $attrs & $listeners. $attrs contains the parent-scope attribute bindings that were not recognized as props, and $listeners contains the v-on listeners registered in the parent scope (without the .native modifier). These are essentially aliases of $vnode.data.attrs and $vnode.data.on, but are reactive. Combining these allows us to simplify a component like this down into this: <div> <inputv-bind="$attrs"v-on=&qu…

Get start with Vue.js

Getting Started The official guide assumes intermediate level knowledge of HTML, CSS, and JavaScript. If you are totally new to frontend development, it might not be the best idea to jump right into a framework as your first step - grasp the basics then come back! Prior experience with other frameworks helps, but is not required. The easiest way to try out Vue.js is using theJSFiddle Hello World example. Feel free to open it in another tab and follow along as we go through some basic examples. Or, you can simplycreate anindex.htmlfileand include Vue with: <scriptsrc="https://unpkg.com/vue"></script> TheInstallationpage provides more options of installing Vue. Note that wedo notrecommend beginners to start withvue-cli, especially if you are not yet familiar with Node.js-based build tools. Declarative Rendering At the core of Vue.js is a system that enables us to declaratively render data to the DOM using straightforward template syntax: <divid="app"> …

24 Must Have WordPress Plugins for Business Websites- Part 1

1. OptinMonsterOptinMonster is the most popular conversion rate optimization software. It allows you to convert abandoning website visitors into email subscribers. If you want to grow your email list, then this is a must have WordPress plugin in 2017. Read these case studies to see how much success other businesses are having by using OptinMonster.
2. WPForms As a business owner, allowing your customers to contact you should be your top priority. WPForms is the most beginner friendly contact form plugin for WordPress. This drag & drop online form builder allows you to easily create contact forms, email subscription forms, order forms, payment forms, and other type of online forms with just a few clicks. We use it on WPBeginner and all of our other sites. There’s a free WPForms Lite version available for those who are looking for a simple solution. If you want more advanced features, then get the Pro version. Use this WPForms coupon to get 10% off your purchase. 3. MonsterInsights Mon…