Posts Tagged safari

Changing Display Resets Scroll Offset

Snook Go to the source

In Chrome 5, Safari 4, Opera 10.53 and sometimes Firefox (although I was unable to reproduce it in this test case), changing the visibility of the element by toggling display:none will cause the scroll offset to reset to zero. Toggling visibility:hidden does not seem to trigger the same problem. Scroll the container and then toggle the classes applied. Class applied: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. … Read the rest here

Modify the Presentation Layout of Safari 5 Reader

Cameron Moll Go to the source

Modify the Presentation Layout of Safari 5 Reader : This tip will work for modifying just about anything, not just color. Try eliminating line 85 if you

Coda Notes, a Safari Extension

Cameron Moll Go to the source

Coda Notes, a Safari Extension : It

New HTML5 Form Field Type: range

Cameron Moll Go to the source

New HTML5 Form Field Type: range : Amidst all the HTML5 buzz over the past year, somehow I missed this: HTML5 offers a new input field type, type=”range” , which renders a UI slider for entering data anywhere between the min and max values you specify. This feature could become as useful as CSS multiple backgrounds, in that a) it

Opera Mini vs. Mobile Safari, a Flickr Photoset

Cameron Moll Go to the source

Opera Mini vs. Mobile Safari, a Flickr Photoset : Screenshots I took this morning comparing Opera Mini for iPhone and Safari on iPhone, using Opera.com, NYTimes.com, Apple.com, and CameronMoll.com. First impressions after a few minutes of testing: Opera Mini is definitely snappy on iPhone. NYTimes.com loads quite fast compared to Safari. However, most text on non-mobilized sites is illegible without tapping to zoom in. This almost negates any speed gains vs. … Read the rest here

Organ Theme for Tumblr

Cameron Moll Go to the source

Organ Theme for Tumblr : From its creator, Simurai : Well, it

Simplified ExpressionEngine Control Panel Theme

Cameron Moll Go to the source

Simplified ExpressionEngine Control Panel Theme : Jesse Bennett-Chamberlain: I

Turning Web Video On Its Head

Eric Meyer Go to the source

Here’s some fun. (For a sufficiently nerdy definition of “fun”.) Launch Safari 4 or Chrome 4. Drag Videotate to the bookmarks bar. Go opt into the YouTube HTML5 beta . Find your favorite YouTube video. … Read the rest here

iPad Ready Websites

Cameron Moll Go to the source

iPad Ready Websites : Apple: iPad features Safari, a mobile web browser that supports the latest web standards

Hundred Pushups

Snook Go to the source

Have you heard of Hundred Pushups ? It’s a simple six-week program to build up your strength by slowly increasing the number of pushups you can complete. By the end of six weeks, you should be able to complete 100 and along the way you’ve gotten a short workout working multiple muscle groups. Since I’m still trying to lose weight , I figured I’d get started on the program (yesterday was my first day and managed to do 12 pushups at the end of my first set). However, being the geek that I am, I thought, "I should track my progress with a cool iPhone app." There is one available for $1.99 from the Hundred Pushups web site. … Read the rest here

HTML5 Forms Are Coming

Snook Go to the source

HTML forms have been, to date, quite simplistic. We’ve had limited options: the text field, the checkbox, the radio button, the textarea and finally the select drop down. Any complex data like phone numbers, email addresses or dates had to be checked by JavaScript. (And you should always and I mean always do server-side validation of the data.) The input element works overtime by being rendered completely differently based on the type it’s given—be that a text field, password, checkbox, radio button, and others. Considering my readership, this is all terribly old and boring to you now. I understand… Read the rest here

Not Supported

Snook Go to the source

Leave it to PPK to come out with a bold statement like, " CSS vendor prefixes considered harmful ". Moreso, It’s time to abolish all vendor prefixes. They’ve become solutions for which there is no problem, and they are actively harming web standards. The problem is that they are necessary. Look at Safari’s implementation of border-radius compared to the rest. I still can’t remember if it’s border-radius-topleft or border-top-left-radius . … Read the rest here

Background Position X and Y

Snook Go to the source

Every now and then I look at using background-position-x and background-position-y but can never seem to find a definitive and up-to-date resource. To save myself the trouble in the future, I’m documenting it here. Positioning via separate X and Y values is a feature that Internet Explorer introduced but never made it into a W3C specification. Any recommendations to add it to the spec have been denied . Why have separate X and Y values? … Read the rest here

Inspector Scrutiny

Eric Meyer Go to the source

It’s been said before that web inspectors

Fixed Monospace Sizing

Eric Meyer Go to the source

Monospace text sizing is, from time to time, completely unintuitive and can be quite maddening if you don’t look at it in exactly the right way. Fortunately, there is a pretty simple workaround, and it’s one you might want to consider using even if you weren’t aware that a problem existed. But first, allow me to lay some foundations. Assuming no other author styles beyond the ones shown, consider the following: span {font-family: monospace;} <p>This is a ‘p’ with a <span>’span’</span> inside.</p> All right, what should be the computed font-size of the span element? Remember, there are no other author styles being applied. … Read the rest here

Rounding Off

Eric Meyer Go to the source

In the course of digging into the guts of a much more complicated problem, I stumbled into an interesting philosophical question posed by web inspection tools. Consider the following CSS and HTML: p {font-size: 10px;} b {font-size: 1.04em;} <p>This is text <b>with some boldfacing</b>.</p> Simple enough. Now, what is the computed font-size for the b element? There are two valid answers. … Read the rest here

Multiple Backgrounds and CSS Gradients

Snook Go to the source

CSS3 features are making their way into the various browsers and while many are holding off on implementing them, there are those who are venturing ahead and likely running into a world of interesting quirks across the various platforms. Two such features that I have been having the pleasure of enjoying are the use of multiple backgrounds and CSS gradients. I’m covering both features because multiple backgrounds by itself is simple enough, as are CSS gradients, but combining the two is where things get interesting. Multiple Backgrounds What are multiple backgrounds when it comes to CSS? I mean the ability to define more than one background image for a single element. That sounds wonderful, doesn’t it… Read the rest here

Safari and Transparent Borders

Snook Go to the source

I had noticed this little bug on my own site. In the footer, there’s a 5px border with the colour set using rgba. In Safari, it’s as if the semi-transparent borders overlap each other in the corners and the values are compounded. This creates little squares in the corner of my squares. Not quite what you’d expect. … Read the rest here

Safari and Transparent Borders

Snook Go to the source

I had noticed this little bug on my own site. In the footer, there’s a 5px border with the colour set using rgba. In Safari, it’s as if the semi-transparent borders overlap each other in the corners and the values are compounded. This creates little squares in the corner of my squares. Not quite what you’d expect. … Read the rest here