[Pro] Conditional Statements, Sprites, IE9 plus all other browsers

Freeway
21

Walter, thank you for the comparison page. But I know that a page with nothing but a search field works. It’s just that, for whatever reason, on my actual web page you see this mess in Mobile Safari:

Nevertheless, I have viewed your example page in various browsers. Here’s my report:

IE7: Displays the “if lte IE8” conditional statement in plain text, directly above the search field. The rounded-corner search field displays, but there is a thin blue border that goes around it, off center. Furthermore, when you insert your text cursor inside the field, the cursor is up too high and it overlaps the little magnifying glass icon.

IE8: Didn’t test because a co-worker was hogging the PC.

IE10: Displays fine. Clicking the magnifying glass doesn’t do anything special.

Safari: Displays fine, and clicking the magnifying glass displays a popup.

Firefox (OSX): Displays fine. Clicking the magnifying glass doesn’t do anything special.

Firefox (WinXP): Similar to the display in OSX FF, except the text inside the field is a little scrunched.

Chrome (OSX): Displays fine. Clicking the magnifying glass doesn’t do anything special.

Chrome (WinXP): Displays a rectangular search field, and the color of the magnifying glass becomes blue, and clicking the magnifying glass does nothing special.

Mobile Safari (iOS6, iPad3): Field displays differently than desktop PC browsers. It looks the same, except there is no magnifying glass icon on the left side. No problems though.

Based on this analysis we can see that the look is not 100% consistent across all browsers and platforms when we use Type:Search to override my sprite in webkit browsers. Furthermore, something is conflicting on my actual web page that prevents proper display in Mobile Safari.

I think I’ll take the 100% consistent look by giving Webkit users the same shaft I give everyone else. They will all get my sprites.

Thanks,

James

P.S. When you have time to comment on HOVER CLASS triggering…
http://freewaytalk.net/thread/view/129272#latest

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

22

My mistake, I always get those comments wrong. I needed a space between IE and 8.

Walter

On Mar 28, 2013, at 1:40 AM, JDW wrote:

IE7: Displays the “if lte IE8” conditional statement in plain text, directly above the search field. The rounded-corner search field displays, but there is a thin blue border that goes around it, off center. Furthermore, when you insert your text cursor inside the field, the cursor is up too high and it overlaps the little magnifying glass icon.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

23

It will never provide a popup on any browser besides Safari and Chrome, and there only if you have searched previously. You might want to erase the down-caret to avoid people thinking it’s there for a reason, I believe I did that in my original example of this (which is still running on FreewayTalk or another of my many community sites).

On your page, you should only be replacing the native search box on the browsers that need it. Your script is too eager, which is why you are getting the replacement on iOS at all. It’s not needed there, so it shouldn’t be an issue. Your search field will look great and be the correct size for that platform if you leave it entirely unstyled.

This script that you are using, you will recall, was written long before HTML5 was a “done thing” and so it injected the type=search into all browsers (and added the behavior/style in non-Safari browsers) in a manner designed to be valid HTML. But with nine-tenths of the major browsers supporting HTML5, it is time to move on and do something more native. The browser will always be faster/smoother/more reliable than any add-on script. And working too hard to make one browser look like another is over-reaching in my opinion, no matter how stylish that browser might be. I’m not even crazy about what Apple are doing with it on their site.

Walter

On Mar 28, 2013, at 1:40 AM, JDW wrote:

Based on this analysis we can see that the look is not 100% consistent across all browsers and platforms when we use Type:Search to override my sprite in webkit browsers. Furthermore, something is conflicting on my actual web page that prevents proper display in Mobile Safari.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

24

Walter, does your last post mean we should be using HTML5 pages now, instead of HTML4?

—James W.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

25

I have been, for the past year and a half at least. It won’t hurt anything to do that, and it might simplify your workflow.

Walter

On Mar 28, 2013, at 4:43 PM, JDW wrote:

Walter, does your last post mean we should be using HTML5 pages now, instead of HTML4?

—James W.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options