Peter Oesteritz gopeter

About: CSS Grid for IE11

CSS Grid in IE11 is an implementation based on the 2011 spec, which means we aren't really able to use grids out of the box according to the newer spec. However, Autoprefixer automates a lot of work for us with getting the correct IE11 properties, and it has support for most (if not all?) -ms-grid properties.

There are still some gotchas which Autoprefixer can't help with though:

There is no auto-placement behaviour in the 2011 spec. This means that for IE11, you have to position everything. rather than use the autoplacement ability of grid.
Using minmax() with an auto value is not supported, and will break things - e.g. minmax(auto, 1200px) will not work. To use minmax, you have to specify two positive values - e.g. minmax(500px, 1200px).
grid-gap properties were added in a later spec. To create grid-gaps in IE11, you will need to create separate

Note: This post is a summary of information paraphrased from an excellent blog post by Christian Sepulveda.

Prerequisites

Instructions

Create the app and download the necessary dependencies.

	// fragment of main app file, to doing manual CloudKit fetches on appear,
	// because can't always rely on CloudKit subscription being timely

	@main
	struct LifeBalanceApp: App {
	@Environment(\.scenePhase) private var scenePhase

	var body: some Scene {
	WindowGroup {
	TodayTab().environmentObject(Session.highlander)

	import { Node, nodeInputRule } from "@tiptap/core";
	import { mergeAttributes } from "@tiptap/react";

	import { uploadImagePlugin, UploadFn } from "./upload_image";

	/**
	* Tiptap Extension to upload images
	* @see https://gist.github.com/slava-vishnyakov/16076dff1a77ddaca93c4bccd4ec4521#gistcomment-3744392
	* @since 7th July 2021
	*

	begin
	require 'bundler/inline'
	rescue LoadError => e
	$stderr.puts 'Bundler version 1.10 or later is required. Please update your Bundler'
	raise e
	end

	gemfile(true) do
	source 'https://rubygems.org'
	gem 'rails', '~> 5.2.0' # Fails in '~> 5.1.0'


	/*
	* Copyright (C) Igor Sysoev
	* Copyright (C) Nginx, Inc.
	*/


	#include <ngx_config.h>
	#include <ngx_core.h>
	#include <ngx_http.h>

	# frozen_string_literal: true
	class AssociationLoader < GraphQL::Batch::Loader
	attr_reader :klass, :association

	def initialize(klass, association)
	raise ArgumentError, "association to load must be a symbol (got #{association.inspect})" unless association.is_a?(Symbol)
	raise ArgumentError, "cannot load associations for class #{klass.name}" unless klass < ActiveRecord::Base
	raise TypeError, "association #{association} does not exist on #{klass.name}" unless klass.reflect_on_association(association)

	@klass = klass

	# Dont forget to set the env variable "certdomain", and either fill in your email below or use an env variable for that too.
	# Also note that this config is using the LetsEncrypt staging server, remove the flag when ready!

	Resources:
	sslSecurityGroupIngress:
	Type: AWS::EC2::SecurityGroupIngress
	Properties:
	GroupId: {"Fn::GetAtt" : ["AWSEBSecurityGroup", "GroupId"]}
	IpProtocol: tcp
	ToPort: 443

	import React, { Component } from 'react'
	import Subapp from './subapp/Root'

	class BigApp extends Component {
	render() {
	return (
	<div>
	<Subapp />
	<Subapp />
	<Subapp />

	node_modules
	dist/
	yarn.lock
	wwwroot