I'm working on a legacy application created with HTML 4, The application is working correctly on Internet Explorer, I want to run the application on Edge chromium and chrome, but I get many style problems. There is some css styles, but to align elements we use tables and HTML attributes like align.
I tried to check if the HTML and CSS are valid using google chrome extension called Validity but I get those errors
the "align" attribute on the "td" element is obsolete. use css instead
the "bgcolor" attribute on the "td" element is obsolete. use css instead
the "width" attribute on the "table" element is obsolete. use css instead
but those attributes are working correctly with HTML 4 in the application, so why those errors ?
Is there any tools to check if all the HTML 4 attributes and css are valid/correct or not ?
They are marked as errors and obsolete because they are obsolete and have been for many years.
That they still work is because browsers tend not to break the web and support such things for many years afterwards. However, one should not rely on this as support can disappear at any time without notice.
The way you check for such things is to use the W3C tools that have been around for decades:
W3C HTML Validator
W3C CSS Validator
Related
I encountered this question while browsing the Q&A section of an online course on advanced responsive design. I found an answer for it, shared it, and decided to post it here as well in case anyone else might have the same dillema.
The dillema is that it could be a lot easier for ensuring browser compatibility if we could define a different style for certain browsers that behave differently from most, e.g. Internet Explorer and, in the case of my website at least, Safari.
So how do we go about doing that? Check out my answer below to find out, and feel free to contribute if you think you know a better way to target specific browsers for specific media queries unique to them.
Using caniuse (https://caniuse.com/), look for a specific property that is only supported by the specific browser you want to target. Then, using the #support query, target that browser with the property you've found is unique to it. Then, whatever styling you apply within that query will only apply to the browser(s) that support(s) the property by which you defined the query.
That is, the properties inside the brackets of a #support query are used to define when - for which browsers - the styling inside the curly braces will apply; they do not need to be the same, that is, you do not need to use the same property styled within the curly braces to define the query in the brackets, so you can choose any property that targets the specific browser(s) you want to display the styling for.
Update:
I found this site that seems to provide the solution to targeting specific browsers and browser versions in the caniuse style, sparing you the need to test each property by hand:
http://browserhacks.com/
This article offers a briefing on how to use it:
https://www.templatemonster.com/help/how-to-create-browser-specific-css-rules-styles.html
Update:
For Internet Explorer only, older versions only, you can create a separate stylesheet to load for them using conditional comments in your HTML. This can be a copy of your general stylesheet, tweaked to work on old IE versions, but loaded only if those versions are detected, therefore not interfering with display on other browsers. They are not, unfortunately, usable for other browsers. This article explains how to use conditional statements.
https://www.quirksmode.org/css/condcom.html
Update:
The most effective solution to this problem seems to me to be to implement some javascript that detects the browser version and then applies specific styles or even modifies the DOM based on the browser(s) you target.
This explains the principle and some applications nicely:
Is there any equivalent to IE conditional comment for chrome and safari?
This, if rather old, is still a very useful such application:
http://rafael.adm.br/css_browser_selector/
And that's it! The ability to ensure browser compatibility with most any browser!
How does one generally debug CSS and resolve issues when some elements on the page are not appearing as they should? For now, I have to painfully comment out CSS declarations one by one to understand how the styles are getting displayed.
While you can not "debug" CSS, because it is not a scripting language, you can utilize the Chrome DevTools Elements panel to inspect an element & view the Styles pane on the right.
This will give you insights as to the styles being overridden or ignored (line threw).
CTRL + SHIFT + I
To Find Errors & Warnings use CSSLint
Debugging CSS and HTML code bugs can really ruin your application design. There are multiple ways to debug CSS and HTML code. There are few things or ways you should consider the debugging and taking care while developing HTML or writing CSS.
Check your syntax errors with http://csslint.net/. It provides the
nice tool and highlights a line where an error occurs.
Closely review your cross-browser compatibility issues. A site looks nice and beautiful in a firefox but sometimes it will not
look nice with another browser at that time you should take care of
cross-browser compatibility issues of CSS. You should nice and proper
CSS framework that will prevent to generate cross-browser issues and
verify HTML tags and CSS properties which may support by browser
correctly.
Browser web developer tool allows outlining an HTML and element with
different criteria this will allow to writing appropriate CSS for HTML
element.
Turn on or off stylesheet with Chrome dev tools. If you’re wondering
how your CSS is affecting a particular page element, the Chrome
DevTools make it easy to toggle each property. In the Google Chrome
web browser, simply right click and choose Inspect Element from the
context menu.On the right side of the Elements panel, you should see a
tab called Styles with some CSS inside of it. This shows you which CSS
declarations are being applied to the selected element, and if you
hover over each CSS property, you can uncheck them individually. When
a property is crossed out, it typically means that it is being
overridden elsewhere. You may need to uncheck a property in several
places to actually remove it from an element.
Use computed tab in chrome dev tools. it tells you exactly how the
browser is computing your styles. When working on large projects this
is essential for resolving cascading issues, problems with selector
specificity, and more.
You may enable chrome dev tools with ctrl+shirt+I or press F12 key
which supports in almost every browser.
Use this to debug your css
* { outline: solid 0.25rem hsla(210, 100%, 100%, 0.5); }
I have an application developed in VS2005 and html4. First of all my question is, is there any tool that will do migration from html4 to html5.
My plan is first select HTML5 from dropdown available in VS2012 then just change the doctype definition from master page to <!DOCTYPE html> and fix all the warning like replace cell padding with padding and etc.
Does these steps are sufficient in order to convert an application in to HTTML5?
Are these steps are sufficient in order to convert an application in to HTML5?
In short, yes, that's pretty much it.
HTML5 is explicitly designed to be backward compatible with HTML4; there is very little that you should need to change apart from the doctype.
There are a few things to be aware of, which might need changing:
A few older HTML tags have been deprecated in HTML5. You can't use things like <blink>, <marquee> or other awful things like that. Hopefully you weren't using them anyway though?
Also some attributes have been deprecated, mostly in favour of using CSS instead. So if you're using width or height or color attributes in your HTML tags, you should replace them with CSS. The same also applies to the <font> tag; use CSS to define your fonts and font sizes instead.
There are various new tags in HTML5 which you may want to use. These are tags like <section> and <footer>, which are designed to make your site's code more readable for search engines. But you don't have to use them; they are entirely optional. Note that IE8 and earlier don't support them unless you use a JavaScript hack, so if you need to support IE8, it may be best not to use these tags. You can still use the HTML5 doctype in IE8 though.
You might find it useful to read the official documentation from the W3C that details the differences between HTML4 and HTML5. Read it here: http://www.w3.org/TR/html5-diff/
I'm doing some custom dev work on an installation of the Whitehouse WordPress theme. And, it appears that some style rules defined within the theme are overriding various features of the tags I'm using, making it extremely annoying to work.
The cellspacing and cellpadding attributes seem to be overridden, all content in table cells aligns to the bottom, and strange gaps and spaces appear after various elements.
I don't know enough about the theme to know what rules are causing which issues - is there any way to make a browser ignore ALL CSS declarations for a specific element or elements except the inline declarations I add to the tags myself?
the CELLSPACING and CELLPADDING attributes seem to be overridden,
Yes, as the specification says: The UA may choose to honor presentational attributes in an HTML source document. If so, these attributes are translated to the corresponding CSS rules with specificity equal to 0, and are treated as if they were inserted at the start of the author style sheet
I don't know enough about the theme to know what rules are causing which issues
Use a DOM inspector such as Firebug, Dragonfly or the ones built into Chrome, Safari and (recent versions of) Internet Explorer. They will tell you which rules are applied to which elements.
is there any way to make a browser ignore ALL css declarations for a specific element or elements except the inline declarations I add to the tags myself?
No, there is not.
I am using a few CSS tricks to boost up the usability/appearance of my site in Webkit browsers. The two main ones are text-shadow and resize:none (on textareas - to stop that annoying page-breaking resize option in Safari and others).
The problem is that when I run my page through the W3 validator I get tons of:
Property text-shadow doesn't exist in CSS level 2.1 but exists in : #feb4b4 1px 1px 0 #feb4b4 1px 1px 0
-and-
Property resize doesn't exist in CSS level 2.1 but exists in : none none
Is this really not valid? Should I really not use this, or is it an error to just ignore?
The text-shadow property is a CSS3 property. If you pick CSS Level 3 from the advanced options on the W3 CSS Validtor service, it should come through okay. It was also in CSS Level 2, but dropped for CSS Level 2.1.
Both text-shadow and resize are only valid properties in CSS 3, they were only implemented in previous versions of CSS by the browsers but were never officially supported. If you want to use them, you really should use CSS 3 instead.
I would use the proprietary browser equivs of the prpoerties in question like -webkit-text-shadow and -webkit-resize i think that will allow the css to validate while still letting you use the properties (even on level 2).
The down side is you have to mimic this for Mozilla as well like -moz-text-shadow if you want to use it there... and assuming IE eventually starts to support these then you might go back and clean it up replacing them all with the single property declaration in the spec.