Tag Archives: safari

Using CSS Grid: Supporting Browsers Without Grid

When using any new CSS, the question of browser support has to be addressed. This is even more of a consideration when new CSS is used for layout as with Flexbox and CSS Grid, rather than things we might consider an enhancement.
In this article, I explore approaches to dealing with browser support today. What are the practical things we can do to allow us to use new CSS now and still give a great experience to the browsers that don’t support it?

Excerpt from:

Using CSS Grid: Supporting Browsers Without Grid

CSS Grid Gotchas And Stumbling Blocks

In March this year, CSS Grid shipped into production versions of Chrome, Firefox and Safari within weeks of each other. It has been great to see how excited people are about finally being able to use it to solve real problems.

CSS Grid Gotchas And Stumbling Blocks

CSS Grid is such a different way of approaching layout that there are a number of common questions I am asked as people start to use the specification. This article aims to answer some of those, and will be one in a series of articles on Smashing Magazine about layouts.

The post CSS Grid Gotchas And Stumbling Blocks appeared first on Smashing Magazine.

View the original here:  

CSS Grid Gotchas And Stumbling Blocks

Web Development Reading List #176: Safari 10.1, Prompt()-Deprecation, And Professional Pride

What a busy week! To stay on top of things, let’s review what happened in the web development world the last few days — from browser vendors pushing new updates and building new JavaScript guidelines and security standards to why we as web professionals need to review our professional pride. How can we properly revoke certificates in browsers, for example? And how can we build accessibility into a style guide? Let’s take a look.

Web Development Reading List 176

Safari 10.1 was announced a while ago already, and this week it finally came to Macs and iOS devices around the world. The new Safari version ships CSS Grid Layouts, fetch(), IndexedDB2.0, Custom Elements, Form Validation, Media Capture, and much more.

The post Web Development Reading List #176: Safari 10.1, Prompt()-Deprecation, And Professional Pride appeared first on Smashing Magazine.

Original link:  

Web Development Reading List #176: Safari 10.1, Prompt()-Deprecation, And Professional Pride

Styling Web Components Using A Shared Style Sheet

Web components are an amazing new feature of the web, allowing developers to define their own custom HTML elements. When combined with a style guide, web components can create a component API, which allows developers to stop copying and pasting code snippets and instead just use a DOM element.

Styling Web Components Using A Shared Style Sheet

By using the shadow DOM, we can encapsulate the web component and not have to worry about specificity wars with any other style sheet on the page. However, web components and style guides currently seem to be at odds with each other.

The post Styling Web Components Using A Shared Style Sheet appeared first on Smashing Magazine.

Visit source: 

Styling Web Components Using A Shared Style Sheet

How To Use ES6 Arguments And Parameters

ECMAScript 6 (or ECMAScript 2015) is the newest version of the ECMAScript standard and has remarkably improved parameter handling in JavaScript. We can now use rest parameters, default values and destructuring, among other new features.
In this tutorial, we will explore arguments and parameters in detail and see how ECMAScript 6 has upgraded them.
Further Reading on SmashingMag: Writing Next Generation Reusable JavaScript Modules in ECMAScript 6 ECMAScript 6 (ES6): What’s New In The Next Version Of JavaScript: What’s New In The Next Version Of JavaScript’“) Making A Complete Polyfill For The HTML5 Details Element Generating SVG With React Arguments Versus Parameters Arguments and parameters are often referred to interchangeably.

Original source: 

How To Use ES6 Arguments And Parameters

Responsive And Fluid Typography With vh And vw Units

Embracing fluid typography might be easier than you think. It has wide browser support, is simple to implement and can be achieved without losing control over many important aspects of design.
Unlike responsive typography, which changes only at set breakpoints, fluid typography resizes smoothly to match any device width. It is an intuitive option for a web in which we have a practically infinite number of screen sizes to support.

View original – 

Responsive And Fluid Typography With vh And vw Units

How To Avoid Duplicate Downloads In Responsive Images

The <picture> element is a new addition to HTML5 that’s being championed by the W3C’s Responsive Images Community Group (RICG). It is intended to provide a declarative, markup-based solution to enable responsive images without the need of JavaScript libraries or complicated server-side detection.
The <picture> element supports a number of different types of fallback content, but the current implementation of these fallbacks is problematic. In this article, we’ll explore how the fallbacks work, how they fail and what can be done about it.

Visit site: 

How To Avoid Duplicate Downloads In Responsive Images

The Guide To CSS Animation: Principles and Examples

With CSS animationnow supported in both Firefox and Webkit browsers, there is no better time to give it a try. Regardless of its technical form, whether traditional, computer-generated 3-D, Flash or CSS, animation always follows the same basic principles.
Further reading on Smashing: SVG and CSS animations with clip-path Creating ‘hand-drawn’ Animations With SVG The new Web Animation API Practical Animation Techniques The Math Behind JavaScript Animations UI Animation Guidelines and Examples Designing Animations In Photoshop Fast Prototyping UI Animations In Keynote In this article, we will take our first steps with CSS animation and consider the main guidelines for creating animation with CSS.

Continued: 

The Guide To CSS Animation: Principles and Examples

Using CSS3: Older Browsers And Common Considerations

With the arrival of IE9, Microsoft has signalled its intent to work more with standards-based technologies. With IE still the single most popular browser and in many ways the browser for the uninitiated, this is hopefully the long awaited start of us Web craftsmen embracing the idea of using CSS3 as freely as we do CSS 2.1. However, with IE9 not being supported on versions of Windows before Vista and a lot of businesses still running XP and reluctant (or unable) to upgrade, it might take a while until a vast majority of our users will see the new technologies put to practice.

From:  

Using CSS3: Older Browsers And Common Considerations

CSS: Innovative Techniques and Practical Solutions

Although CSS isn’t that difficult, useful CSS techniques are not easy to find. Sometimes finding a cross-browser solution might take time, but you don’t have to reinvent the wheel every single time. Other designers may have had the same problem in the past and thus the main goal of this round-up is to share with you a goldmine of new techniques which you will hopefully find very useful and valuable.

Visit site:

CSS: Innovative Techniques and Practical Solutions