If you are to develop in an environment where it is impossible to use debugging tools like FireBug , such as the Apple iPhone simulator in Xcode, it can become frustrating to find problems, including an incorrect access to all the properties of an object. Here the use of works alert() is fundamental!
Articles Tagged 'Safari'
Very short trick: log JavaScript objects
Firefox 3.5.7: how to fix the defect of the rounded edges of an image
Sometimes you just move an item, changing the point of view, to solve a problem seems insurmountable. And when one has to do with compatibility between browsers and CSS, inventing solutions "spectacular" (stunts would say) is on the agenda. , per Safari e Google Chrome. What I show you an easy way to apply rounded corners to images using -moz-border-radius , which is available for Mozilla FireFox and -webkit-border-radius , Safari and Google Chrome.
Very short trick: disable the resizing of a textarea on Safari
In any browser developed starting from the rendering engine WebKit (as apputo Safari or Chrome ), the fields textarea show, in the lower right, the characteristic feature of resizing. If such specificity can be really useful in certain cases, in others it is transformed into an element annoying.
jQuery: round edges on the images to overlap
Because of the different rendering across browsers, Microsoft Internet Explorer definitely see that in mind, we must always resort to tricks to apply special effects that now should be a standard. The award-discussed rounded edges are a classic example of "disaster" produced by the complete inability to make a serious standards on pages render HTML / CSS. , etc… There are many solutions that allow the network to obtain the "effects" (effects which present as exempt from the HTML rounded corners, shadow effects, reflections, etc ...) with patches on the leaves of styles, special tricks using div grafted, libraries Javascript, use of canvas , etc ...
On a purely educational I will illustrate further technique (cross-browser) to apply to the rounded edges of the images:
Demo and source
CSS3: has anyone seen the Internet Explorer?
I just do not ...
1 2 3 4 5 6 7 8 9 | {p / * Rounded Corners * / ; /* CSS 3 */ border-radius: 9px; / * CSS 3 * / ; /* Opera */ -O-border-radius: 9px; / * Opera * / ; /* iCab */ -ICab-border-radius: 9px; / * iCab * / ; /* Konqueror */ -Khtml-border-radius: 9px; / * Konqueror * / ; /* Firefox */ -Moz-border-radius: 9px; / * Firefox * / ; /* Safari */ -Webkit-border-radius: 9px; / * Safari * / } |
jQuery against everyone: a benchmark with 5 browser
A good developer has no problem to switch from one programming language to another. The choice to focus on a particular language, framework or development environment, is dictated more by the availability of time and the type of work that goes on. However, an important factor that may influence the choice of "framework" such is the sympathy and affection that can mature over time.
Specifically, I wanted to analyze some - not all - Javascript frameworks available today, because even "advised" to take a look especially at jQuery .
The creators of mootools (one of the most popular JavaScript frameworks) have made available a tool to run a speed test and validity of five well-known JavaScript frameworks: Slickspeed . This test, the outcome is not at all obvious, is important as working on the client side Javascript frameworks, that are performed by our browser. It is precisely for this reason that some find Safari faster than Internet Explorer or Google Chrome faster than Firefox . However, this often depends on the type of page you are viewing. Indeed, it may well happen that a particular site is really "faster" when viewed in Safari, but this does not mean that "all sites" will be faster with Safari! Obviously this is true for any other browser.
The benchmark
In tests I've done with Slickspeed I compared the browsers available on my machine (Windows Vista 64bit Utilmate - Intel Core 2 Quad 2.4GHz with 8Gb RAM).
Unfortunately, the tests are not able to run with Internet Explorer 7, as the car crashed, even going out of scale with the results! Once again, congratulations Microsoft.
I crercato to maintain the same status of the PC during the test run, opening the browser and not individually by sending no other processes running.
Note: If you feel like you also run one or more of these tests, you can comment on this post in case of "odd" and different results.
Google Chrome was really fast, with a value of 68 (average) in the test with jQuery . The slower, however, was Flock , despite coming from the same "mother" Mozilla. This poor performance of Flock is really curious as its cutting social networks, because it is precisely the Social Network Web 2.0 to take advantage of the many JavaScript frameworks available, so as to provide an experience of truly innovative navigation and interaction.
Surprisingly beats FireFox and Opera also has a nice little ', even getting a 74 in the performance of Dojo ! FireFox and Safari, after all, are similar, with Safari faster in tests with Mootools and jQuery.
Which framework to choose?
If we do not care to test the speed of execution and we do not care dimesion in Kbytes of the same framework, the answer may be "whatever you like" or, if you like, "what you know better or is more harmonious with your style of programming. "
Ultimately, these frameworks will look a bit 'all (see for example the use of $), despite some important and substantial differences that can jump in the eyes of an expert or really pushed the use of a particular library. In principle, in fact, everything that can be done with jQuery, for example, you can do fine with mootools or prototype! If jQuery has a very compact syntax, as all methods always return the jQuery object basis, thus creating endless rows of oggetto.metodo().metodo().metodo()... said that this is not at all costs a strength, especially for those who will have to debug!
Libraries like prototype.js sin, perhaps in the absence of effects, even simple, forcing the developer to implement as a spinoff scriptaculous.js , heavy and distant from the library first choice.
An example
Precisely this is why, for example, led me to replace the coupled prototype / scriptaculous with jQuery to create interactive panels / Animated undolog.com here in the sidebar. Indeed, even using Google API to import libraries, is a waste load all the library and scriptaculous for a slideDown slideUp. For information and an example, here is the Javascript code as it was coupled with the prototype / scriptaculous:
1 2 3 4 5 6 7 8 9 10 11 12 13 | / / Prototype / scriptaculous ) . each ( $ $ ('H2.dropdown'). Each ( element ) { function (element) { = "pointer" ; element. style. cursor = "pointer"; 'click' , element. observe ('click', event ) { function (event) { this . next ( ) . style . display == "" ) new Effect. BlindUp ( this . next ( ) , { duration : .5 } ) ; if (this. next (). style. display == "") new Effect. BlindUp (this. next (), {duration: .5}); Effect. BlindDown ( this . next ( ) , { duration : .3 } ) ; Effect else new. BlindDown (this. next (), {duration: .3}); event ) ; Event. Stop (event); } ) } ); |
and it is now with jQuery:
1 2 3 4 5 6 7 8 9 10 | / / JQuery ) . each ( $ ('H2.dropdown'). Each ( i ) { function (s) { ) . css ( 'cursor' , 'pointer' ) . click ( $ (This). Css ('cursor', 'pointer'). Click ( function () { $ ( this ) . next ( ) . is ( ':hidden' ) ) $ ( this ) . next ( ) . slideDown ( ) ; else $ ( this ) . next ( ) . slideUp ( ) ; if ($ (this). next (). is (': hidden')) $ (this). next (). slideDown (); else $ (this). next (). slideUp (); } ); } ); |
All in all, a closer look, I do not think there is a lot of difference! But as I said before ... the question is "well" of personal taste.
Firebug Lite: Firebug for IE, Opera and Safari
Using Firebug Lite you can use a simplified version of the note on the extension for FireFox browsers Microsoft Internet Exploer, Opera and Apple Safari. Firebug Lite can be used in two ways: as a call or as a library Bookmark offline
Bookmark fashions
Adding this "special address" Firebug Lite to our bookmarks (drag the link into my favorites) - the code is:
1 |
You can enable Firebug Lite on any Web site from any browser. This is perhaps the most attractive option, although the functions are very limited.
Offline
Alternatively, if we are developing a Web site, you can download a JavaScript and install it on our Web! In this way we can use Firebug Lite even without an Internet connection and locally.
Firebug Lite is a way to compensate for the lack of this extension to other browsers, but I was slow and very limited, especially in CSS! As they say, better than nothing ...
Safari, remove the blue border on input fields
Safari, the Apple browser available for Windows too, produces a blue border (blue border) when you click inside a field input . If in some cases it may be pleasant, others becomes really annoying! To delete just put in our style sheet:
1 2 | / * ____________________________ Remove blue border * / : 0 none } input {outline: 0 none} |
Or, alternatively, directly as an attribute in the tag input :
1 | "outline: 0 none" ... / > < input style = "outline: 0 none" ... /> |
Made in the image resizing on browser
In principle, when you insert an image in an HTML document should use its original size. However, the TAG IMG allows you to force the width (width) and height (height) of any image, indipendemente from its original size. This scaling is done - of course - from the browser.
Use the original size of an image is good, although in some cases leads to double work for the Web Designer and / or dynamic engines (such as CMS or libraries of graphics manipulation) on the Web Server. A classic slide show, for example, as a rule show the preview or thumbnail (reduced size images) show that if you select the original image larger.
Xopus: WYSIWYG XML editor
Xopus is an XML editor (HTML) in WYSIWYG mode working inside the browser. I had already noticed some time ago, thanks to an article released on Ajaxian . I mention this now because it remains an attractive proposition in view web2.0/editor. It is an interesting experience! Xopus has developed really well (with Italian support), with an excellent implementation of the context menu, although still not fully cross-browser, the current release 3.1 is supported only Microsoft Internet Explorer (version 6 and 7 ) although developers have promised as soon as at least a version compatible with Firefox (February 1 has been released in alpha version 3.1.1 compatible with Firefox 2.0 +).
As discussed elsewhere, the question of compatibility (cross browser) via the browser, and penalizes slows the development of tools that, even without resorting to special technologies like Adobe Flash or Java applet, could bring a significant contribution to the Community! Conttibuto prevented - at last - from unnecessary internal battles of the current producers of browsers: IE, Firefox, Opera, Mozilla, Safari, ...!
Viewing the demo you can see something more than just HTML editors, to put the word poor. Xopus proposes both the traditional structure of the editor, and advanced features of Microsoft Word style. It is possible, in fact, inserted within the page real smart objects that meet certain characteristics, making Xopus a particular case.
As indicated on the website:
Xopus is a good solution for any business That has a back-end content management system and front-to-end publishing systems and Therefore Which two systems use the examination information. That structure to information, to make ends meet Both, Therefore is a must.
Poete watch the video demonstration that introduces the advanced editing features. Also you can try a demo directly.
Latest Comments
Giovambattista Fazioli : @ Nik: I'm happy! Good luck then!
Nik : I have Monday examining information on java, thanks to me you have been very useful, the book I was unclear ...
Mark : Thank you very much, I've lit
I solved it by setting [cc_objc] / / OptionViewController.m - ...
Giovambattista Fazioli : @ Mark: I suggest you think a more correct approach. If you run the subclass of the tab ...
louis : very clear and simple I have to admit that writing a pa hardly use delegates created by ...