Lets Discuss Html5 And Css3 - Webmasters - Nairaland
Nairaland Forum / Science/Technology / Webmasters / Lets Discuss Html5 And Css3 (1641 Views)
Free Ebook: Responsive Web Design With Html5 And Css3 / Get FREE Ebook On Web Design, PHP, CSS3, HTML5 And Wordpress / Learn Html5 And Ccs3 Free From Mozilla School Of Webcraft (2) (3) (4)
| Lets Discuss Html5 And Css3 by guru01(m): 4:07pm On Dec 26, 2012 |
Hello great webmasters, I created this topic because i can't find any serious thing on this section. Am tired of crap. I recently discover the power of html5 and css3. I will like us to enlighten our self on these technologies and how they work with some cool examples. NOTE: This trend is not for advert or selling skills, but insight on the above topic. Please Moderator take note. <!DOCTYPE HTML> <html> </html>  |
| Re: Lets Discuss Html5 And Css3 by 3kay945(m): 4:45pm On Dec 26, 2012 |
what are these all about? is it about programming? cos am considering learning it soon. |
| Re: Lets Discuss Html5 And Css3 by guru01(m): 5:26pm On Dec 26, 2012 |
HTML5 is a semantic for structuring web pages, while css3 is for presenting your web page. |
| Re: Lets Discuss Html5 And Css3 by yawatide(f): 6:44pm On Dec 26, 2012 |
Before starting your noble gesture, you might want to caution in advance that many of HTML5 and CSS3 features aren't supported by IE (even IE9 that is promising to do so has been found wanting in some areas). As a result, either code with these using "progressive enhancement" and "graceful degradation" in mind OR code with these only if you are purposely restricting yourself to a specific set of browsers/devices. I await the discussions... |
| Re: Lets Discuss Html5 And Css3 by guru01(m): 6:51pm On Dec 26, 2012 |
@yawa-tide, that is why this trend is created. Last few moths about i was test the border-radius property of css3, which worked in some browsers and didn't work for some, except you add the vendor property. But later this past week i was working on an element and decide to give it a border-radius and guest what all browsers complied to it including IE9. We will need people like to contribute to this topic. We will be discussing everything involve in HTML5 and CSS3. |
| Re: Lets Discuss Html5 And Css3 by guru01(m): 6:58pm On Dec 26, 2012 |
To view all the list of HTML5 Tag/Element follow this link: https://developer.mozilla.org/en-US/docs/HTML/HTML5/HTML5_element_list |
| Re: Lets Discuss Html5 And Css3 by 3kay945(m): 10:45pm On Dec 26, 2012 |
guru01: HTML5 is a semantic for structuring web pages, while css3 is for presenting your web page. Thanks |
| Re: Lets Discuss Html5 And Css3 by Nobody: 1:39am On Dec 27, 2012 |
@op, keep up the good work. And thanks for wishing me merry christmas earlier on my phone, it was appreciated. |
| Re: Lets Discuss Html5 And Css3 by guru01(m): 2:23am On Dec 27, 2012 |
*dhtml:@dhtml, you deserve more than that...Thank you for been such a great inspiration. Also to Dualcore and Yawatide, a big thank you to you, you are doing such a great work on this section. More fuel to your machine. |
| Re: Lets Discuss Html5 And Css3 by winexviv: 8:03am On Dec 27, 2012 |
HTML5 and CSS3 works perfectly on IE. First you need to declare <!DOCTYPE html> at the beginning of every page of your website. The <!DOCTYPE> declaration is not an HTML tag; it is an instruction to the web browser about what version of HTML the page is written in. so <!DOCTYPE html> tells the browser you are working on HTML5. |
| Re: Lets Discuss Html5 And Css3 by yawatide(f): 1:24pm On Dec 27, 2012 |
^^^ Hmm, I have been working with IE7 and IE8 on a corporate level for a long time and can definitely state that HTML5 and CSS3 don't work consistently there. Also, we can't just jump to IE9 because web stats show that a majority of folks are on IE7 and IE8. In fact ,we even have to add the IE7 emulate tag to our pages so that pages render as IE7 pages, as IE7 is more consistent. Even the IE9 sef, it doesn't support the above fully. Hopefully, should MSFT go ahead with forcing people to upgrade and MSFT can get its act together, then we can expect consistently across the board. For now, it seems MSFT is benefiting from the browser wars, IMHO. |
| Re: Lets Discuss Html5 And Css3 by guru01(m): 1:31pm On Dec 27, 2012 |
HTML5 will fully be supported by all browsers by 2020, but that doesn't mean you should wait till that time, most of the major modern browser support 50% of the semantics including mobile native browser. One thing a cherish about HTML5 is the ability to use it to develop a robust mobile app alongside other frameworks. Here are the list of HTML5 API: http://www.netmagazine.com/features/developer-s-guide-html5-apis |
| Re: Lets Discuss Html5 And Css3 by yawatide(f): 6:01pm On Dec 27, 2012 |
wow! 2020....8 years from now. Will the world even be around by then? Interesting  |
| Re: Lets Discuss Html5 And Css3 by greenmouse(m): 8:47am On Dec 28, 2012 |
Is inetresting, good and interesting features but still not compatible with many browsers. |
| Re: Lets Discuss Html5 And Css3 by guru01(m): 9:09am On Dec 28, 2012 |
yawa-ti-de:8 years is just an estimate, because all browsers vendor are now aware of HTML5 and they will start implementing it in newer versions and also updating the older versions. |
| Re: Lets Discuss Html5 And Css3 by Kennyinusa(m): 2:49pm On Dec 28, 2012 |
For a programmer like myself, if you are discussing HTML5 and CSS3 then i would say add JAVASCRIPT then you start writing apps for [b]windows8(All platrorms), almost all smartphones [/b]e.t.c. thats the power of [size=15pt]HTML5, CSS3 and Javascript [/size] |
| Re: Lets Discuss Html5 And Css3 by guru01(m): 3:36am On Dec 29, 2012 |
Kennyinusa: For a programmer like myself, if you are discussing HTML5 and CSS3 then i would say add JAVASCRIPT then you start writing apps for [b]windows8(All platrorms), almost all smartphones [/b]e.t.c. thats the power of [size=15pt]HTML5, CSS3 and JavascriptYou are absolutely correct. If you are still using firework/photoshop to design a GRADIENT BACKGROUND or trying to get a rounded box for your div, the good news is that you can actually do that with css3. There are some site out there that offer free service of creating a css3 gradient and border radius. |
| Re: Lets Discuss Html5 And Css3 by jeffsmith1: 2:36pm On Dec 29, 2012 |
what else do you wanna discuss P.S. html5 and Css3 are not properly used and implemented now. |
| Re: Lets Discuss Html5 And Css3 by guru01(m): 8:02pm On Dec 29, 2012 |
Here is a good list of HTML5 fall back: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills It also includes CSS3/4 fallback. You don't need to worry about IE |
| Re: Lets Discuss Html5 And Css3 by yawatide(f): 12:59pm On Dec 30, 2012 |
Yes, there are plenty of fallbacks, like this one but I always have 2 questions which not many have been able to answer to my satisfaction (not to say it is bad to use them): 1) Is it worth importing extra KB of JavaScript (or whatever code) just to use HTML5 or CSS3? 2) What happens when the browser you are targetting does support HTML/CSS3? Will you need to go back and take out these extra libraries or will everything fall into place automatically? |
| Re: Lets Discuss Html5 And Css3 by guru01(m): 9:28pm On Dec 30, 2012 |
yawa-ti-de:Good questions. 1) Its worth importing kb of scripting code for the sake of those who still rely on their IE lte 9, and also for those who still use window XP. Because the code will only work for them. That's where Modernizer come into play. It detects of that browser support HTML5/CSS3. 2) If your browser supports HTML5/CSS3 it simply ignores the code and carryout the HTML. This fallback won't be a disadvantage even if all browsers support new standards, if you are still developing to support IE 6 or 7 you better stop, because even Micro soft doesn't support it. Let say for example, you wanted to create a form(create secure form with html5 is cool and with css3 its sexy) after creating your form, you need to validate with JS, HTML5 makes it easy for me by using the "required, placeholder, date, tel, number, text, etc " attribute. |
| Re: Lets Discuss Html5 And Css3 by yawatide(f): 11:20pm On Dec 30, 2012 |
Yes, the kind of stuff you noted above can be implemented without harm but there is more stuff. As for importing extra KB, my concern there is for folks (like in Nigeria) with low bandwidth , especially when considering a lot of such folks are on mobile devices. To me, the faster you delivery the bytes, the better. No arguments though. You make salient points as well...many that I am familiar with. Just clean, honest debate, which I must confess, I have enjoyed thus far. As for MSFT no longer supporting IE7, I don't know about that. I know of IE6 but not IE7. Many companies that I know have a minimum of IE7 for browser support so that to me says/means something. |
| Re: Lets Discuss Html5 And Css3 by guru01(m): 12:07pm On Dec 31, 2012 |
especially when considering a lot of such folks are on mobile devices95% of mobile device(smartphones) Support HTML5 and CSS3 so no worry, if you are building a mobile site, i will advice to use HTML5. MSFT no longer supporting IE7Am just saying, but soon it wont be supported. No source yet, its just an instinct.  |
| Re: Lets Discuss Html5 And Css3 by guru01(m): 8:33am On Jan 08, 2013 |
<SECTION> TAG in html5 specify a section in the webpage. So when you use a section element you are telling the browser that this is a section, and also NOTE that a section should have a heading. E.g: <section><header><h3></h3></header>followed by div tag or any thing you want to put on that section</section> There is a browser plugin called HTML5 outliner that is used to see how your webpage is outlined. I use this plugin installed in chrome. When you view your webpage with html5 outliner, you will find out that any section without a header and heading element will be named UNTITLED content/document. |
| Re: Lets Discuss Html5 And Css3 by guru01(m): 5:51pm On Jan 08, 2013 |
WHEN TO USE A SECTION ELEMENT The new HTML5 SECTION element can be somewhat confusing. If you've been building HTML documents before HTML5, chances are you are already using the DIV element to create structural divisions within your pages and then style the pages with them. The first thing to understand is that the SECTION element is a semantic element. This means that it provides meaning to both user agents and humans about what the enclosed content is—specifically a section of the document. This may seem like a very general semantic description, and that's because it is. There are other HTML5 elements that provide more semantic distinctions to your content that you should use first, before you use the SECTION element: ARTICLE ELEMENT ASIDE ELEMENT NAV ELEMENT Use the ARTICLE element when the content is an independent part of the site that can stand alone and be syndicated like an article or blog post. Use the ASIDE element when the content is tangentially related to either the content of the page or the site itself, such as sidebars, annotations, footnotes, or associated site information. Use the NAV element for content that is navigation. The SECTION element is a generic semantic element. You use it to specify a particular section of your webpage. Just like in a document, the table of content contains a list of sections and sub-sections of the content in that document. So, in your webpage you also might need to specify a section of the document, that's where the SECTION comes in. A SECTION element can also be found inside an ARTICLE, NAV, or ASIDE. You can even nest sections to indicate that one group of content is a section of another group of content that is a section of an article or the page as a whole. The DIV element in HTML5 is a non-semantic container element. If the content you are trying to combine doesn't have a semantic meaning, but you still need to combine it for styling, then the DIV element is the appropriate element to use. HOW SECTION ELEMENT WORKS The SECTION element creates items inside an outline of the document. And as such, you should always have a header element (H1 through H6) as a part of the section. If you can't come up with a title for the section, then again the DIV element is probably more appropriate. Remember, if you don't want the section title to appear on the page, you can always mask it with CSS. WHEN NOT TO USE THE SECTION ElEMENT Beyond the advice above to use the more specific semantic elements first, there is one definite area that you should not use the SECTION element: for style only. In other words, if the only reason you're putting an element in that place is to attach CSS style properties, you should not use a SECTION element. Find a semantic element or use the DIV element instead. FINALLY A difficulty in writing semantic HTML is that what is semantic to me may be utter nonsense to you. If you feel that you can justify using the SECTION element in your documents, then you should use it. Most user agents don't care and will display the page as you might expect whether you style a DIV or a SECTION. For designers who like to be semantically correct, using the SECTION element in a semantically valid way is important. For designers who just want their pages to work, that isn't as important. I believe that writing semantically valid HTML is good practice and keeps the pages more future-proofed. But in the end it's up to you. |
| Re: Lets Discuss Html5 And Css3 by yawatide(f): 8:31pm On Jan 08, 2013 |
^^^ Nice write up but semantics is semantic - a P tag is always a P tag and should be used for paragraphs...a UL tag is the same way, etc etc. |
| Re: Lets Discuss Html5 And Css3 by guru01(m): 8:57pm On Jan 08, 2013 |
Thanks. |
(1) (Reply)
Unable To Get Google Adsense Approval / Make Cool Money With This Site 100% Real / How To Cartoon Your Portrait (REAL VECTOR X6)
(Go Up)
| Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health religion celebs tv-movies music-radio literature webmasters programming techmarket Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10) Nairaland - Copyright © 2005 - 2024 Oluwaseun Osewa. All rights reserved. See How To Advertise. 43 |