#Opera Archives

If you are a web developer then it’s unlikely that you haven’t faced this situation-You spent days and weeks writing perfect code. Everything is perfect from the CSS stylesheet to the meta tags. You test it in Google Chrome and it works perfectly fine. You go home and sleep in peace. But when you come back to the office the next day, everything is broken and you find a hundred bugs allocated in your name.

Culprit? Internet Explorer.

And, Mozilla Firefox.

And, Opera.

Happens to all of us, right?

So, is there a way out of this mess? Well, there isn’t. At least not a full proof one. 100% cross-browser compatibility is a myth. It’s almost impossible to write a code which works perfectly fine in all the internet browsers. It comes with experience and you need a lot of patience to learn that craft.

But you can always start small. I learned some browser specific hacks during my journey and I thought it’s a good idea to share them with fellow developers.

Implementation

It is as simple as you write your simple CSS code, just pick the hack you want. Copy it into your stylesheet. Add the style you want between the braces. Enjoy the new styles for the browser that you’ve targeted!

Google Chrome and Safari Browsers

Google Chrome and Safari browsers are mainly the same as they both use WebKit, but sometimes they behave differently in the case of forms, fonts etc.

Css hacks

@media screen and (-webkit-min-device-pixel-ratio:0){

.selector{

property:Value;

}

Media Query Hacks

@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: 1280px){

.selector {}

}

Javascript hacks

var isChrome = !!window.chrome && !!window.chrome.webstore; // for Google chrome

var isWebkit = ‘WebkitAppearance’ in document.documentElement.style; // for Chrome and Safari

Firefox (any version)

Css hacks

@-moz-document url-prefix() {

.selector { Property: Value; }

}

Media Query Hacks

@media all and (min–moz-device-pixel-ratio:0) and (min-resolution: 1280px) {

.selector { Property: Value; }

}

Javascript hacks

var isFF = ‘MozAppearance’ in document.documentElement.style;

Opera – Opera 10 and above

Css hacks

@media not all and (-webkit-min-device-pixel-ratio:0) {

.selector { Property: Value; }

}

Media Query Hacks

@media all and(-webkit-min-device-pixel-ratio:0)and(min-resolution: 1280px){

.selector {

Property: Value;

}

Javascript hacks

var isOpera = window.opera && window.opera.version() == X; //replace x y the version

Internet Explorer

Css hacks

:root .selector {

Property: Value\9; color: red\9;

}

Conditional Comments

<!–[if IE 9]> Internet Explorer 9 <![endif]–>

<!–[if lte IE 9]> Internet Explorer 9 or less <![endif]–>

<!–[if gte IE 9]> Internet Explorer 9 or greater <![endif]—>

For example:

<!–[if IE 9]>

<![endif]–>

IE 10 and above

_:-ms-lang(x), .selector { property:value; }

@media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {

.ie10up {property: value;}

}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {

.ie10up {property: value;}

}

IE 11 and above

_:-ms-fullscreen, :root .ie11up { property:value; }//Works for IE 11 and above

*::-ms-backdrop, :root .selector { property:value; }//Works for IE 11

IE 11+, Microsoft Edge Browser

/* Put this code in external stylesheet: ie11up.css */

@charset “<Any Modern Browser but MSIE 10- or FF 18- >”; _:-ms-lang(x), .selector { property:value; }

Javascript hacks

var isIE = ‘behavior’ in document.documentElement.style && ‘- ms-user-select’ in document.documentElement.style;

var isIE = window.navigator.msPointerEnabled;

var isIE = document.body.style.msTouchAction !== undefined;

In this digital age, one can’t survive without technology. Mobile apps have become an obsession for people, a proven fact that in 2017, users around the world downloaded almost 197 billion Android apps and over 25 billion iOS apps. The app development business has reached its peak in the past few years and has been growing higher since.

But with the craze for mobile apps rising high, there’s one massive problem that has arisen for app development companies. Finding enough talented developers who can develop the same thing for Android and iOS is a bit of a challenge.

So is there a more natural solution?

Of course, there is! If you want to develop an app from scratch, for both iOS and Android platforms, React Native is the best option.

React Native is a framework that can be used to develop cross-platform apps. It is a JavaScript-based framework created by Facebook to develop apps supported by both Android and iOS platforms. While it offers benefits such as reduced development time and reusable code and app components, there are some differences between the usages of React Native for both platforms.

In this article, we are going to highlight five significant differences between React Native app development methods across Android and iOS. But before that, let’s have a look at the features of React Native that have made it so popular.

Why is React Native gaining impetus?

React Native is a widely used platform that allows you to alter the user interface of an app for both iOS and Android development. Following are some primary reasons that React Native is such a hit among app developers:

Open-source Framework – This framework is open-source. Its structure is all set to become completely compatible with both Windows and macOS. It also supports reusing already written code instead of rewriting it from scratch.
Quick Development – Application development is not an easy task. Writing code from scratch and learning to code in Swift and Java is tough and time-consuming. React Native resolves this issue in a way that instead of having expertise in these two, you are only required to know JavaScript; this makes app development very easy and quick. That said, basic knowledge of Swift and Java is also necessary.
Focus on the User Interface – React Native allows you to develop smooth and easy-to-navigate User Interface in both operating systems at the same time. UI is one of the main reasons behind its popularity. Before this, developers were required to prioritize one type of operating system. React Native resolved this issue and made development more comfortable and balanced for both platforms.

Coming to the focal point now –The differences when used for Android and iOS no platform is perfect when it comes to technology. There are some boundaries and restrictions for every one of them. The same is the case with React Native. App development for Android and iOS vastly differs, and it is because of the following factors:

Mobile Operating system

While you develop a cross-platform app using React Native, you need to access a few specific iOS simulator tools for app testing. But these tools are not considered reliable as Apple does not officially recognize them. In the case of Windows, Android studio is a reliable source to test the Android version of apps. So it is effortless to conduct official testing for the android version, and there is no authorized testing module available for iOS. That does not mean that iOS apps are not tested; we can say that the results are not authentic.

A suggested solution to overcome this problem is to test the iOS app within Android Studio since it is compatible with macOS. It is better to use Apple MacBook as the testing device to test both, Android and iOS versions of the React Native apps.

Linking Libraries

If you need to link third-party libraries in your app, you cannot merely use the React Native link called “library name” to link libraries. You are required to link those third-party libraries manually. This manual linking is considered to be a hurdle because it is time-consuming, and it requires developers to have distinct knowledge about Android and iOS development.

We can avoid manual linking if complete documentation of the required libraries are available, which is rare. The manual linking requires the developer to have a grip on Java and Swift or Objective C language.

Platform-Specific Styles Elements

While working on a cross-platform app, it is essential to consider the style differences. The styles added using React Native look different in iOS and Android because both operating systems might not support that styling. For example, if you add shadow style in your app, it won’t be visible in the Android version, as Android does not support this styling.

So, developers require keeping the style differences in mind and use the styles which are supported by both operating systems.

Native Elements

The display differences of different native app elements might not be considered at the initial stage, but once development proceeds, developers start regarding such differences as hurdles. React Native has several elements to be used, but the results differ according to the platform they are implemented on. For example, the picker component would display a different outcome on an iOS simulator and a different one on the Android emulator.

Platform-Specific Design Elements

React Native provides a cross-development platform because of shared code, and developers expect to build both versions of applications with minimal efforts. But unfortunately, no platform is perfect. iOS apps usually are quite minimalist in design, while Android is more drawn towards the material design principle. While developing through shared code, you need to make sure that the app is suitable according to its natural look and feel for both platforms. Right now, multitask panels in iOS have small tabs in contrast, while the interchangeable tabs of Android’s multitasking panel are almost of screen size. So, developers need to keep track of these differences while developing on a shared platform.

Similarly, the icons of iOS apps are round-cornered squares, while Android has a range of useful options that include icons with transparent background and shadows. iOS has simplicity and lower cognitive load on icons. There is also a difference in navigation patterns for both operating systems. Android’s native navigation-bar has back and refresh buttons, while in iOS, the back button on the top is screen-specific and also works with a right swipe gesture.

All these differences are necessary to consider for developers while working on application development through React Native. These issues are essential to tackle but don’t come in the way of making it a popular and reliable platform. Many big brands have utilized React Native to develop popular applications for both operating systems.

To Sum It Up

From in-app features to design elements to testing tools, the development of iOS and Android mobile app development using React Native differs on various levels. Developers need to take care of these differences to avoid bugs during implementation. Many big brands like Instagram, Uber Eats, Airbnb, and Gyroscope use React Native’s shared platform technique, which goes a long way to indicate that the framework is reliable and generates up to the mark results.

Tag: #Opera

Browser specific hacks for Frontend developers