Cross Browser Compatibility

24th Oct 2015

  Logico Research and Development Team concluded after detailed study and rich experience that creating consistent experience for every user in all browsers is never going to happen for every project. The reason is our goal while developing a website must is not to make it work in all browsers rather it is to get it working in every browser with minimum code hence rendering future maintenance easy.

The beauty of the style sheet (code) is in achieving precise-cross-browser-compatibility with as little CSS as possible. We can say this almost-cross-browser layout or precise-cross-browser-layout for nothing is perfect in this material world. First thing out of the hacks you must know being a front end developer is ‘to Understand CSS Box Model’.  We give you a basic introduction of this Model:

Block-level elements are always rectangular

Their dimensions are calculated by width, height, padding, borders, and margins

If no height is specified, a block element will be as high as the content it contains, plus padding (unless there are floats, for which see below)

If no width is specified, a non-floated box will expand to fit the width of its parent minus padding (more on this later)

Now we elaborate a little on how to deal with Block Level Elements!

 

Assuming that the page on having the Block Level Elements is in standard mode, we humbly put:

  •  If a box has its width set to “100%”, it must not have any margins, padding, or borders, otherwise it will overflow its parent
  •  Vertically-adjacent margins bring collapsing issues that can impact layouts
  •   Elements positioned relatively or absolutely will behave differently, the details of which are extensive and beyond the scope of this article

Here are some basic rules that differentiate block elements from inline:

  •  Block elements will, by default, expand horizontally to fill their parent container, so there’s no need to set a width of “100%”
  • Block elements will, by default, begin at the leftmost edge of the parent box, below any previous block elements (unless floats or positioned)
  • Inline elements will ignore width and height settings
  • Inline elements flow with text, and are impacted by typographical properties such as white-space, font-size etc.
  • Vertical-align property can align inline elements but not block elements
  • Inline elements will have some natural space below them in order to accommodate text elements that drop below the line (like the letter “g”)
  • An inline element will naturally become a block element if it is floated …

  Logico R&D Team will continue posting Lectures on Cross-browser-compatibility for the front end developers to have an unrivaled command in handling this prevalent issue..