Add browser recognition on page inline CSS

Today I will show you an example how you can add browser recognition inside the "Inline CSS" mask of your APEX page.

Why would you need that?
Sometimes it is necessary to execute different CSS styles depending on the client browser.

For example:
If you want to recreate the text input field as a DIV element then you will see different styles (height, width and border color) in different browsers. 

I wrote some years ago about a similar situation:
APEX "Display as Text" items with border and background-color
(Never thought that a blog post from 2008 could be valuable anymore. :D )

Normally if you would differentiate between browser based CSS code you will do it on a file level:

<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]--> 

But there is another way which can be used in an inline CSS area as well. For that you will have to add browser specific styles which will only be executed in those browsers.

/* Internet Explorer */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  /* css_class { styles } */
}

/* Firefox */
@-moz-document url-prefix() {
  /* css_class { styles } */
}

/* Chrome */
@supports (-webkit-appearance:none) and (not (overflow:-webkit-marquee))
and (not (-ms-accelerator:true)) {
  /* css_class { styles } */
}

/* Safari - not tested yet */
::i-block-chrome,.css_class {
    /* styles */
}

/* MS Edge - not tested yet */
@supports (-ms-accelerator:true) {
  /* css_class { styles } */
}

I found the CSS code snippets on those sites:
IE 10/11: http://philipnewcomer.net/2014/04/target-internet-explorer-10-11-css/
Firefox: http://www.denisbouquet.com/css-hack-chrome-safari-firefox-only/
Chrome: http://stackoverflow.com/questions/10812093/is-there-a-google-chrome-only-css-hack
Safari: http://stackoverflow.com/questions/23300412/target-safari-css-but-not-chrome
Edge: http://stackoverflow.com/questions/32940965/how-to-target-microsoft-edge-with-css

And here is the final solution for my DIV as INPUT problem:

/* DIV as Textfield - Internet Explorer */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  div .rep_col_edit {
    background-color: white;
    border: 1px solid black;
    display: table-cell;
    height: 24px;
    min-width: 137px;
    padding-left: 2px;
    vertical-align: middle;
  }
}

/* DIV as Textfield - Firefox */
@-moz-document url-prefix() {
  div .rep_col_edit {
    background-color: white;
    border: 1px solid #333333;
    display: table-cell;
    height: 25px;
    min-width: 124px;
    padding-left: 2px;
    vertical-align: middle;
  }
}

/* DIV as Textfield - Chrome */
@supports (-webkit-appearance:none) and (not (overflow:-webkit-marquee))
and (not (-ms-accelerator:true)) {
  div .rep_col_edit {
    background-color: white;
    border: 1px solid #333333;
    display: table-cell;
    height: 24px;
    min-width: 150px;
    padding-left: 2px;
    vertical-align: middle;
  }
}

/* DIV as Textfield - Safari - not tested yet */
::i-block-chrome,.rep_col_edit {
    background-color: white;
    border: 1px solid #333333;
    display: table-cell;
    height: 24px;
    min-width: 125px;
    padding-left: 2px;
    vertical-align: middle;
}

/* DIV as Textfield - MS Edge - not tested yet */
@supports (-ms-accelerator:true) {
  div .rep_col_edit {
    background-color: white;
    border: 1px solid black;
    display: table-cell;
    height: 24px;
    min-width: 137px;
    padding-left: 2px;
    vertical-align: middle;
  }
}

Post Tags:

APEX examples